如何将数据分配给组件中的变量？

Question

I have core component:

export class AppComponent implements OnInit {
   constructor() {

       const toast: any = {
        type: exception.type,
        body: ToasterRenderComponent.messages = ["44"],
        bodyOutputType: BodyOutputType.Component
      };

      this.toasterService.pop(toast);
   }
}

In constructor I try to fill object toast and assign data to variable of component ToasterRenderComponent :

ToasterRenderComponent.messages = ["44"]

Component ToasterRenderComponent has public property messages , but it does not work for me.

Answer 1

try this

import { Router } from '@angular/router';    
export class AppComponent implements OnInit {
   constructor(private router: Router) {    
       const toast: any = {
        type: exception.type,
        body: ToasterRenderComponent.messages = ["44"],
        bodyOutputType: BodyOutputType.Component
      };    
      this.router.config.find(r => r.component== ToasterRenderComponent).data = toast;
   }
}

in component "ToasterRenderComponent"

import { ActivatedRoute } from '@angular/router';    
export class ToasterRenderComponent implements OnInit {
  toasterObject: any;
  constructor(private router: ActivatedRoute) { }
  ngOnInit() {
    this.router.data.subscribe(r=>this.toasterObject=r);
  }
}

Answer 2

When working with cross component data transmission there are a on the top of my head two primary ways to do it depending on the relationship between the components.

• If the components views are not nested (not parent and child), then the natural approach would be to create an Angular service .

• If the components are nested, one would usually pass data through template data binding .

Of course there are work-arounds, however to ensure that Angular destroys components correctly I'd suggest sticking to what the documentation states.