[英]NG2: How can I access parent component generically?
在开始之前请注意,我最初是在 angular2 github 站点上作为功能请求提出这个问题的。 然而,该请求已关闭,我被建议将其张贴在这里。 在这里,我只是重复我最初的要求。 但是,您可以通过以下链接找到一些讨论: https : //github.com/angular/angular/issues/10448
我需要能够获得对父组件的引用,而子组件不必知道父组件的类型。 基本上我需要这样的东西(伪代码):
@Component({
template: '<child></child>'
directives: [Child]
})
class ParentComponent{}
@Component({ selector: 'child' })
class ChildComponent{
constructor(@Parent() _parent: any){}
}
基本上我需要ChildComponent
的_parent
字段来引用ParentComponent
。 但是请注意_parent
的类型是any
。 它是any
因为它可以是任何,字面意思。 ChildComponent
是一个通用组件,可以被任何类型的其他组件使用。 我知道有解决这个问题的方法,但它们都需要孩子知道父母的类型。 它是这样的:
@Component({ selector: 'child' })
class ChildComponent{
constructor(_parent: ParentComponent){}
}
但同样,这对我不起作用,因为ChildComponent
可以用于任何类型的其他组件,并且没有人知道另一个的类型。 所以我需要的是一些通用的方法将其父组件注入ChildComponent
,如组件树中设置的那样,而ChildComponent
不知道父类型。 有谁知道我怎么能做到这一点?
您可以使用Injector API 。
对于 Angular2 最新版本和旧版本:
import { Injector } from '@angular/core';
import {AppComponent} from "./app.component";
@Component({ selector: 'child' })
class ChildComponent{
constructor(private inj:Injector){
let parentComponent = this.inj.get(AppComponent);
console.log(parentComponent);
}
}
使用@Input
和一个小技巧将父对象的this
发送给子对象。 我想你也可以@Output
通过@Output
从父级访问子@Output
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: '<app-child [parnt]="var2"></app-child>',
style: ''
})
export class AppComponent {
title = 'app works!';
var1 = "val1";
var2 = this;
}
import { Component, Input, EventEmitter, OnInit } from '@angular/core';
@Component({
selector: 'app-child',
template: '{{parnt.var1}}',
style: ''
})
export class ChildComponent implements OnInit {
@Input() parnt;
}
您应该会看到“val1”打印出来,即子模板中打印的父级 var1 的值。
感谢@yurzui 带领我走向正确的方向......最后我找到了几种不同的方法......不幸的是,所有方法都涉及访问不太理想的私人成员......如果有人知道更好的方法,请说出来……谢谢
constructor(private vcRef: ViewContainerRef){
var parentComponent1 = this.vcRef.injector._view.context;
console.log(parentComponent1);
var parentComponent2 = this.vcRef._element.parentView.context;
console.log(parentComponent2);
console.log(parentComponent1 === parentComponent2);
}
这是使其工作的方法。
@Component({
selector: 'child'
})
class ChildComponent{
constructor( @Optional() public myParent: ParentComponent ){}
}
您可以在Angular DI 文档中找到更多信息
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.