Question

在开始之前请注意我最初在angular2 github网站上将此问题作为功能请求提出。但是请求已经结束，我被建议在这里发布。所以我在这里。希望在stackoverflow上我会有更好的运气。原始请求可在此处找到：https://github.com/angular/angular/issues/10448。在这里，我只是重复我的初步要求。但是，您可以通过以下链接找到一些讨论。我们走了......穿过我的手指......

我需要能够通常获得对父组件的引用，而不必让孩子知道父组件的类型。基本上我需要这样的东西（伪代码）：

@Component({
    template: '<child></child>'
    directives: [Child]
})
class ParentComponent{}

@Component({
    selector: 'child'
})
class ChildComponent{
    constructor(@Parent() _parent: any){}
}

基本上我需要_parent的{{1}}字段来引用ChildComponent。但请注意ParentComponent的类型是_parent。它是any因为它可以是任何字面意思。 any是一个通用组件，可供任何类型的其他组件使用。我知道这个问题有解决方案，但它们都需要孩子知道父母的类型。它是这样的：

ChildComponent

但同样，这对我不起作用，因为@Component({ selector: 'child' }) class ChildComponent{ constructor(_parent: ParentComponent){} }可以在任何类型的其他组件中使用，而且没有人知道另一个组件的类型。所以我需要的是一些通用的方法来注入ChildComponent它的父组件，如组件树中设置的那样，没有ChildComponent知道父类型。有谁知道我怎么能做到这一点？

谢谢

Answer 1

您可以使用 Injector API 。

<强>＃Angular2 latest release (also applicable for older versions)

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);
    }
}

Answer 2

使用@Input和一个小技巧将父级的this发送给孩子。我想你也可以通过@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;
}

你应该看到＆＃34; val1＆＃34; print，打印在子模板中的父级的var1的值。

Answer 3

感谢@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);
  }

NG2：如何一般访问父组件？

3 个答案:

父组件

子组件