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

Question

I'm new to Angular and I have this problem here: I want to pass the data that I have from this service+component to another component.

I have a service doing this:

getRecs() {

    let recsSub = new Subject<any>();
    let recsSubObservable = from(recsSub);

    this.socket.on('recs', (recsStatus: any) => {
        recsSub.next(recsStatus);
    });

return recsSubObservable;
}

Then I have this parent component

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, });

 });
 }

What I need is to populate a list in another component with the values obtained from recsStatus but I don't know how to do it.

Thank you all for your help.

Answer 1

If the component is a child component of your component (parent) you describe in the listing you can use the @Input() annotation.

@Component({
    selector: 'child-comp',
    template: `
    <div>
        {{ localRecStatus | json }}
    </div>
   `
})
export class ChildComponent {
    @Input()
    localRecStatus: [];
}

Now you can use the component in HTML file of your parent component like this:

<child-comp [localRecStatus]="recStatus"></child-comp>

With this, you can use recStatus in your child component. However, recStatus must be a public variable of the parent component. With this technique, you can pass any data to child components. There is also an @Output() annotation you can use in combination with an EventEmitter to send data to the parent component. If the component is not a child, probably a better way is to communicate via a Service between both components.