Angular 2/TypeScript: @ Вход/выход/вход или выход?

Question

Выполняя курс по Udemy, мы разрешаем передачу данных dy с использованием декоратора @Input() в классе компонентов.

При чтении через ngBook-2 я обнаружил, что существует другой подход, используя свойство input внутри декоратора @Component.

THIS подобный вопрос на SO, один человек ответил:

Одно из преимуществ использования входов является то, что пользователи класса нужно только посмотреть на объект конфигурации, переданного @Component декоратора, чтобы найти вход (и выход).

и смотреть через documentation состояние, что:

ли вы использовать входы/выходы или @ Input/Output @ результат тот же так что выбор, который один для использования в значительной степени стилистическое решение.

Действительно, самая полезная информация об этом в основном противоречива в зависимости от того, где вы смотрите.

Внутри @Component

@Component({ 
    selector: 'product-image', 
    inputs: ['product'], 
    template: ` 
    <img class="product-image" [src]="product.imageUrl"> 
}) 

class ProductImage { 
    product: Product; 
} 

Внутри класса

@Component({ 
    selector: 'product-image', 
    template: ` 
    <img class="product-image" [src]="product.imageUrl"> 
}) 

class ProductImage { 
    @Input() product: Product; 
} 

Вещи, которые я хотел бы знать,

• Что один будет больше «Лучшая практика»?
• Когда вы будете использовать один над другим?
• Есть ли какие-либо отличия?

Answer 1

Угловое Руководство 2 Стиль

Согласно официальному Angular 2 style guide, STYLE 05-12 говорит

ли использовать @Input и @Output вместо входов и выходов свойств @Directive и @Component декораторы

Преимущество состоит в том, что (из руководства):

• Проще и понятнее определить, какие свойства в классе являются входами или выходами.
• Если вам нужно переименовать свойство или имя события, связанное с @Input или @Output, вы можете изменить его на одно место.
• Декларация метаданных, прилагаемая к директиве, короче и, следовательно, более читаема.
• Размещение декоратора на одной линии делает более короткий код и по-прежнему легко идентифицирует свойство как вход или выход.

Я лично использовал этот стиль и очень ценю его, помогая сохранить код DRY.

Answer 2

Один из прохладной вещи, которые я знаю, что вы можете сделать с декораторами, но я не, если это возможно с другим способом, является сглаживание переменной:

export class MyComponent { 

@Output('select') $onSelect = new EventEmitter<any>(); // this is aliased 

@Output() finish = new EventEmitter<any>(); // not aliased 

sendUp(){ 
    this.$onSelect.emit('selected'); 

    this.finish.emit('done'); 
} 
} 

, а затем из-за пределов:

<my-component (select)="doSomething($event)"></my-component> 

---

Другой устанавливает значение по умолчанию, вы можете установить значение по умолчанию в обоих направлениях, но декораторы кажутся более удобными и меньше кода.

@Component({ 
    selector:'my-component' 
}) 
export class MyComponent { 
    @Input() id = 'default-id';  

    ngOnInit(){ 

    console.log('id is : ',this.id); // will output default-id if you don't pass anything when using the component 
    } 
} 

Таким образом, в этом случае, если потребитель не передает идентификатор в качестве входа, вы до сих пор по умолчанию идентификатор;

<my-component></my-component>; 

Где, как, если вы хотите сделать это с помощью входов массива, вы могли бы сделать:

@Component({ 
    selector:'my-component', 
    inputs:['id'] 
}) 
export class MyComponent { 
    private id = 'default-id';  

    ngOnInit(){ 

    console.log('id is : ',this.id); // will output default-id if you don't pass anything when using the component 
    } 
} 

Результат такой же, но если вы заметили, в этом случае вы должны поставить id как в входы array и определить его внутри класса.

EDIT:

Видимо альясинга с выходов [] также возможно, как ниже:

@Component({ 
    selector: 'my-component', 
    template: ` 
    <button (click)="sendUp()">Send up</button> 
    `, 
    outputs: ['$onSelect: select'] 
}) 
export class ChildComponent { 
    $onSelect = new EventEmitter<any>(); // this is aliased 

    sendUp() { 
    this.$onSelect.emit('selected'); 
    } 
} 

Но опять-таки вы должны определить его в двух местах, на в массиве и один в классе , поэтому я по-прежнему предпочитаю декораторов.