javascript 如何从 Angular 中的子路由组件访问父组件属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49006337/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to access parent component properties from a child route component in Angular?
提问by shireef khatab
version:(Angular 5)
版本：（角5）
I'm new to Angular and I'm stuck there. I know how to share data between parent and child component simply by injecting [parentData]="var" into the child selector <>.
我是 Angular 的新手，我被困在那里。我知道如何通过将 [parentData]="var" 注入子选择器 <> 来在父组件和子组件之间共享数据。
But when using routing; I only have router-outlet and can't bind [parentData] to it as it throws error.
但是当使用路由时；我只有路由器插座，无法将 [parentData] 绑定到它，因为它会引发错误。
What is the best and easiest way to access parent properties from a child route?
从子路由访问父属性的最佳和最简单的方法是什么？
The project is on stackblitz here.
该项目在此处的 stackblitz 上。
I need to display products (from parent component) inside the child component.
我需要在子组件内显示产品（来自父组件）。
采纳答案by Kraken
Yes this is pretty simple, when you want to pass to component that are in router-outletyou need to use services, actually that component do not exist in the template before you go to the right path, so usual bindings don't work here.
是的，这很简单，当您想传递给router-outlet您需要使用的services组件时，实际上该组件在您转到正确路径之前不存在于模板中，因此通常的绑定在这里不起作用。
So the best way to work this around is to create some simple service
所以解决这个问题的最好方法是创建一些简单的服务
In the service
在服务中
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);
}
}
then inject your service into both constructors of your parent and child component
然后将您的服务注入到父组件和子组件的构造函数中
In parent component
在父组件中
constructor(private dataTransfer: DataTransferService){}
then create a method
然后创建一个方法
shareData(data){
this.dataTransfer.sendAnything(data) // to send something
}
and call it from the parent.component.html with
并从 parent.component.html 调用它
(click)="shareData(data)" // data is the parent data that you want to share
In child component
在子组件中
inside the ngOnInit method add:
在 ngOnInit 方法中添加：
ngOnInit() {
this.dataTransfer.products.subscribe(res=> this.var = res) // var is the property that you want to assign the data to it.
}
to get the data and work with it.
more info and examples You can find in doc
获取数据并使用它。
更多信息和示例您可以在文档中找到
回答by m.bouali
On the one hand, you can not pass an input to the router-outlet tag since the component added by the router will be a sibling to the tag and won't replace it.
一方面，您不能将输入传递给 router-outlet 标签，因为路由器添加的组件将是该标签的同级组件，不会替换它。
On the other, When your Angular application becomes more and more complex, passing the same input from the parent components to the child ones will no longer be the right way to do things..
另一方面，当您的 Angular 应用程序变得越来越复杂时，将相同的输入从父组件传递给子组件将不再是正确的做事方式。
In your case, the best way to deal with the products variable is to declare it as a behavior subject in the products service:
在您的情况下，处理 products 变量的最佳方法是在 products 服务中将其声明为行为主体：
prodcuts:Subject<IProducts[]> = new BehaviorSubject<IProducts[]>([]);
and in the parent component, you send the received data:
在父组件中，您发送接收到的数据：
ngOnInit() {
this._productsService.getProducts()
.subscribe(
data => {this.products = data;
this._productsService.prodcuts.next(data);
},
error => this.errMsg = error
);
}
Finally, in the child client you have to subscribe to the behavior subject declared in the service:
最后，在子客户端中，您必须订阅服务中声明的行为主体：
export class ChildComponent implements OnInit {
public products = [];
constructor(private _productsService: ProductsService ) {
}
ngOnInit() {
this._productsService.prodcuts
.subscribe(
data => {
{this.products = data;
}
);
}
}
