[英]NG2: How can I access parent component generically?
Before I begin please note that I originally asked this question as a feature request at the angular2 github site.在开始之前请注意,我最初是在 angular2 github 站点上作为功能请求提出这个问题的。 However the request was closed and I was advised to post it here.然而,该请求已关闭,我被建议将其张贴在这里。 Here I am just repeating my initial request.在这里,我只是重复我最初的要求。 However you can find some discussion by following the link: https://github.com/angular/angular/issues/10448但是,您可以通过以下链接找到一些讨论: https : //github.com/angular/angular/issues/10448
I need the ability to obtain a reference to the parent component generically without the child having to know the type of the parent component.我需要能够获得对父组件的引用,而子组件不必知道父组件的类型。 Basically I need something like this (pseudocode):基本上我需要这样的东西(伪代码):
@Component({
template: '<child></child>'
directives: [Child]
})
class ParentComponent{}
@Component({ selector: 'child' })
class ChildComponent{
constructor(@Parent() _parent: any){}
}
Basically I need the _parent
field of the ChildComponent
to reference the ParentComponent
.基本上我需要ChildComponent
的_parent
字段来引用ParentComponent
。 But notice how the type of _parent
is any
.但是请注意_parent
的类型是any
。 It's any
because it can be any, literally.它是any
因为它可以是任何,字面意思。 ChildComponent
is a generic component that can be used by any type of other component. ChildComponent
是一个通用组件,可以被任何类型的其他组件使用。 I know there are solutions out there for this problem but they all entail the child knowing the type of the parent.我知道有解决这个问题的方法,但它们都需要孩子知道父母的类型。 It goes something like this:它是这样的:
@Component({ selector: 'child' })
class ChildComponent{
constructor(_parent: ParentComponent){}
}
But again, this will not work for me because ChildComponent
can be used in any type of other component, and neither one knows the type of the other.但同样,这对我不起作用,因为ChildComponent
可以用于任何类型的其他组件,并且没有人知道另一个的类型。 So what I need is some generic way to inject into ChildComponent
its parent component, as set in the component tree, without ChildComponent
knowing the parent type.所以我需要的是一些通用的方法将其父组件注入ChildComponent
,如组件树中设置的那样,而ChildComponent
不知道父类型。 Does anyone know how I can accomplish this?有谁知道我怎么能做到这一点?
You can use Injector API for the same.您可以使用Injector API 。
For Angular2 latest release and older versions:对于 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);
}
}
Using @Input
and a little trick to send the this
of the parent to the child.使用@Input
和一个小技巧将父对象的this
发送给子对象。 I guess you can do it the other way around also, to access child from parent via an @Output
我想你也可以@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;
}
You should see "val1" printed, the value of the var1 of the parent printed in the child template.您应该会看到“val1”打印出来,即子模板中打印的父级 var1 的值。
Thanks to @yurzui for leading me in the right direction... In the end I found a couple of different ways... unfortunately all involve accessing private members which is less than ideal... If anyone knows of a better way, please speak up... thank you感谢@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);
}
Here is how to make it work.这是使其工作的方法。
@Component({
selector: 'child'
})
class ChildComponent{
constructor( @Optional() public myParent: ParentComponent ){}
}
You can find more info in Angular DI docs您可以在Angular DI 文档中找到更多信息
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.