Мои компоненты часто начинаются с нескольких @Input и @Output. Когда я добавляю свойства, кажется более чистым переключиться на один объект конфигурации в качестве входных данных.
Например, здесь компонент с несколькими входами и выходами:
export class UsingEventEmitter implements OnInit {
@Input() prop1: number;
@Output() prop1Change = new EventEmitter<number>();
@Input() prop2: number;
@Output() prop2Change = new EventEmitter<number>();
ngOnInit() {
// Simulate something that changes prop1
setTimeout(() => this.prop1Change.emit(this.prop1 + 1));
}
}
И его использование:
export class AppComponent {
prop1 = 1;
onProp1Changed = () => {
// prop1 has already been reassigned by using the [(prop1)]='prop1' syntax
}
prop2 = 2;
onProp2Changed = () => {
// prop2 has already been reassigned by using the [(prop2)]='prop2' syntax
}
}
Шаблон:
<using-event-emitter
[(prop1)]='prop1'
(prop1Change)='onProp1Changed()'
[(prop2)]='prop2'
(prop2Change)='onProp2Changed()'>
</using-event-emitter>
По мере роста количества свойств кажется, что переход на один объект конфигурации может быть более чистым. Например, здесь компонент, который принимает один объект конфигурации:
export class UsingConfig implements OnInit {
@Input() config;
ngOnInit() {
// Simulate something that changes prop1
setTimeout(() => this.config.onProp1Changed(this.config.prop1 + 1));
}
}
И его использование:
export class AppComponent {
config = {
prop1: 1,
onProp1Changed(val: number) {
this.prop1 = val;
},
prop2: 2,
onProp2Changed(val: number) {
this.prop2 = val;
}
};
}
Шаблон:
<using-config [config]='config'></using-config>
Теперь я могу просто передать ссылку на объект конфигурации через несколько слоев вложенных компонентов. Компонент с использованием config будет вызывать обратные вызовы, такие как config.onProp1Changed(...), что заставляет объект конфигурации выполнять переназначение нового значения. Похоже, что мы все еще имеем односторонний поток данных. Плюс добавление и удаление свойств не требует изменений в промежуточных слоях.
Есть ли недостатки в наличии одного объекта конфигурации в качестве входа в компонент, вместо того, чтобы иметь несколько входов и выходов? Будет ли избежать @Output и EventEmitter как это вызывает проблемы, которые могут догнать мне позже?