在服务中

Question

我是Angular的新手，但我被困在那里。我知道如何通过在子选择器＆lt;＆gt;中注入[parentData] =“var”来在父组件和子组件之间共享数据。

但是在使用路由时;我只有路由器插座，并且不能将[parentData]绑定到它，因为它会抛出错误。

从子路由访问父属性的最佳和最简单方法是什么？

该项目位于stackblitz here。

我需要在子组件中显示产品（来自父组件）。

Answer 1

一方面，您无法将输入传递给router-outlet标签，因为路由器添加的组件将成为标签的兄弟，并且不会替换它。

另一方面，当你的Angular应用程序变得越来越复杂时，将相同的输入从父组件传递给子组件将不再是正确的做事方式。

在您的情况下，处理产品变量的最佳方法是将其声明为产品服务中的行为主题：

   prodcuts:Subject<IProducts[]> = new BehaviorSubject<IProducts[]>([]);

并在父组件中发送收到的数据：

ngOnInit() { 
    this._productsService.getProducts()
        .subscribe(
          data => {this.products = data;
          this._productsService.prodcuts.next(data);
          },
          error => this.errMsg = error
        );    
}

最后，在子客户端中，您必须订阅服务中声明的行为主题：

export class ChildComponent implements OnInit {
public products = [];

constructor(private _productsService: ProductsService ) { 
}

ngOnInit() {
    this._productsService.prodcuts
    .subscribe(
      data => {
       {this.products = data;
      }
    );    
  } 
}

Answer 2

是的，这很简单，当您想要传递到router-outlet中需要使用services的组件时，实际上该组件在您走向正确路径之前不存在于模板中，所以通常的绑定在这里不起作用。

因此，解决此问题的最佳方法是创建一些简单的服务

在服务中

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class DataTransferService {

  private products= new BehaviorSubject<any>([]);
  cast= this.products.asObservable();

  sendAnything(data) {
    this.products.next(data);
  }

}

然后将您的服务注入父组件和子组件的两个构造函数

在父组件

中

 constructor(private dataTransfer: DataTransferService){}

然后创建一个方法

 shareData(data){
    this.dataTransfer.sendAnything(data) // to send something
}

并使用

从parent.component.html调用它

(click)="shareData(data)" // data is the parent data that you want to share

在子组件

中

在ngOnInit方法中添加：

 ngOnInit() {
   this.dataTransfer.products.subscribe(res=> this.var = res) // var is the property that you want to assign the data to it.
 }

获取数据并使用它。
更多信息和示例您可以在doc

中找到

如何从Angular 5中的子路由组件访问父组件属性？

2 个答案:

在服务中

在父组件

在子组件