Question

我是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获得的值填充另一个组件中的列表，但我不知道该怎么做。

谢谢大家的帮助。

Answer 1

如果该组件是您的组件（父级）的子组件，则可以使用_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结合使用，以将数据发送到父组件。如果组件不是子组件，则可能更好的方法是通过服务在两个组件之间进行通信。

角度在这些组件之间共享数据

1 个答案: