我是Angular的新手,目前遇到了问题。
我知道通过将[parentData]="var"注入到子选择器<>中,可以简单地在父组件和子组件之间共享数据。
但是当使用路由时,我只有一个router-outlet,并且无法将[parentData]绑定到它上面,因为这会抛出错误。
最好和最简单的方法是从子路由中访问父组件的属性?
项目位于stackblitz这里。
我需要在子组件中显示来自父组件的产品。
版本:(Angular 5)
我是Angular的新手,目前遇到了问题。
我知道通过将[parentData]="var"注入到子选择器<>中,可以简单地在父组件和子组件之间共享数据。
但是当使用路由时,我只有一个router-outlet,并且无法将[parentData]绑定到它上面,因为这会抛出错误。
最好和最简单的方法是从子路由中访问父组件的属性?
项目位于stackblitz这里。
我需要在子组件中显示来自父组件的产品。
版本:(Angular 5)
是的,这很简单,当您想要传递给位于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.
}
获取数据并对其进行操作。
更多信息和示例可在文档中找到。
Subject
而不是 BehaviorSubject
,使用 Subject
可以解决问题。https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service - Exlord 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;
}
);
}
}