Question

我有核心要素：

export class AppComponent implements OnInit {
   constructor() {

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

      this.toasterService.pop(toast);
   }
}

在构造函数中，我尝试填充对象toast并将数据分配给组件ToasterRenderComponent的变量：

ToasterRenderComponent.messages = ["44"]

组件ToasterRenderComponent具有公共属性messages，但不适用于我。

Answer 1

尝试

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

在组件“ 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

在处理跨组件数据传输时，取决于组件之间的关系，有两种主要方法可以实现跨组件数据传输。

如果未嵌套组件视图（不是父视图和子视图），那么自然的方法是创建一个Angular service。
如果组件是嵌套的，则通常会通过template data binding传递数据。

当然有解决方法，但是为了确保Angular正确销毁组件，我建议坚持使用文档中规定的内容。

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

2 个答案: