将EventEmitter传递给@Input是将事件从父级传递给子级的一种可接受的方式吗

Question

我觉得这是一种代码气味，意味着应该重构代码，但我对Angular的经验不足，无法进行调用。

这里有一个快速的例子来展示我的意思

https://stackblitz.com/edit/angular-ivy-hctcn5

Answer 1

您似乎在混合输入和事件发射器。当组件具有父子关系时，可以直接将父成员变量绑定到子组件输入。

parent.com组件.ts

@Component({
selector: 'my-app',
template: 
`
<my-app-child-one [buttonClick]="onSave"></my-app-child-one>
<my-app-child-two [buttonClick]="onSave"></my-app-child-two>
<button (click)="onSave=true">save</button>
<button (click)="onSave=false">unsave</button>
`,
})
export class AppComponent  {
onSave: boolean = false;
}

child-one.component.ts

@Component({
selector: 'my-app-child-one',
template: 
'<p>Child 1 input: {{ buttonClick }}</p>',
})
export class ChildOneComponent implements OnInit  {
@Input()
buttonClick: boolean;
ngOnInit() {
}
}

child-two.component.ts

@Component({
selector: 'my-app-child-two',
template: 
'<p>Child 2 input: {{ buttonClick }}</p>',
})
export class ChildTwoComponent implements OnInit {
@Input()
buttonClick: boolean;
ngOnInit() {
}
}

我修改了你的斯塔克布利茨。

此外，如果您希望有一个数据流，请考虑使用RxJS可观察器，如Subject、BehaviorSubject或ReplaySubject。EventEmitter是RxJSSubject的Angular特定实现，更好地与Output装饰器一起使用，以从组件发出自定义事件。

更新

有多种方法可以在组件之间传递数据。如果您希望拥有一个数据流而不是单个值，那么您可以研究上面提到的可观察性和单例服务。

另一方面，您可以将输入绑定到setter，以对输入变量的更改做出反应。

parent.com组件.ts

@Component({
selector: 'my-app',
template: 
`
<my-app-child-one [onSave]="onSave"></my-app-child-one>
<my-app-child-two [onSave]="onSave"></my-app-child-two>
<button (click)="onSave=true">save</button>
<button (click)="onSave=false">unsave</button>
`,
})
export class AppComponent  {
onSave: boolean = false;
}

child-one.component.ts

@Component({
selector: 'my-app-child-one',
template: 
'<p>Child 1 input: {{ buttonClick }}</p>',
})
export class ChildOneComponent implements OnInit  {
buttonClick: boolean;
@Input()
set onSave(value: boolean) {
// do something
this.buttonClick = value;
}
ngOnInit() {
}
}

child-two.component.ts

@Component({
selector: 'my-app-child-two',
template: 
'<p>Child 2 input: {{ buttonClick }}</p>',
})
export class ChildTwoComponent implements OnInit {
buttonClick: boolean;
@Input()
set onSave(value: boolean) {
// do something
this.buttonClick = value;
}
ngOnInit() {
}
}

工作示例：Stacklitz