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

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领域ChildComponent引用ParentComponent.但是要注意的类型如何_parent为any.这是any因为它可以是任何字面意思.ChildComponent是一个可以被任何类型的其他组件使用的通用组件.我知道这个问题有解决方案,但它们都需要孩子知道父母的类型.它是这样的:

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

但同样,这对我不起作用,因为ChildComponent可以在任何类型的其他组件中使用,并且没有人知道另一个组件的类型.所以我需要的是一些注入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;
}

您应该看到打印了"val1",子模板中打印的父级var1的值.