我是Angular的新手,我在这里遇到这个问题: 我想将这个service +组件中的数据传递给另一个组件。
我有这样做的服务
getRecs() {
let recsSub = new Subject<any>();
let recsSubObservable = from(recsSub);
this.socket.on('recs', (recsStatus: any) => {
recsSub.next(recsStatus);
});
return recsSubObservable;
}
然后我有这个父组件
private misRecs = null;
snackBarShown = false;
constructor (private appSocketIoService: AppSocketIoService, private snackbar: MatSnackBar) {
let recsObservable = this.appSocketIoService.getRecommendations();
recsObservable.subscribe((recsStatus: any) => {
console.log(recsStatus);
this.misRecs = {};
for(let property in recsStatus.output){
if (recsStatus.output[property]) {
this.misRecs[property] = recsStatus.output[property];
}
};
this.snackbar.openFromComponent (CustomSnackBar, { duration: 5000, });
});
}
我需要用从recsStatus
获得的值填充另一个组件中的列表,但我不知道该怎么做。
谢谢大家的帮助。
答案 0 :(得分:0)
如果该组件是您的组件(父级)的子组件,则可以使用_ENV
批注。
@Input()
现在您可以像这样使用父组件的HTML文件中的组件:
@Component({
selector: 'child-comp',
template: `
<div>
{{ localRecStatus | json }}
</div>
`
})
export class ChildComponent {
@Input()
localRecStatus: [];
}
这样,您可以在子组件中使用recStatus。但是,<child-comp [localRecStatus]="recStatus"></child-comp>
必须是父组件的公共变量。使用这种技术,您可以将任何数据传递给子组件。还可以将recStatus
批注与EventEmitter结合使用,以将数据发送到父组件。如果组件不是子组件,则可能更好的方法是通过服务在两个组件之间进行通信。