1

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.

Improve this question
7
  • Seems I should create instance of ToasterRenderComponent Commented Dec 14, 2018 at 12:43
  • I tried: body: new ToasterRenderComponent().messages = ["Message1"], Commented Dec 14, 2018 at 12:44
  • Error is: ToasterContainerComponent.html:3 ERROR Error: No component factory found for [sfsdfsdsdf]. Did you add it to @NgModule.entryComponents? at noComponentFactoryError... Commented Dec 14, 2018 at 12:44
  • This is component, I try to use component for toaster: https://www.npmjs.com/package/angular2-toaster Commented Dec 14, 2018 at 12:46
  • You should create a service exposing an Observable and methods like AddToast() and clear(). Your toaster should subscribe to the observable, and your other components should use the methods to update the data that should be displayed by your toaster. Commented Dec 14, 2018 at 12:48

2 Answers 2

Reset to default
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);
  }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.