我如何注入父组件成子组件？ [英] How do I inject a parent component into a child component?

问题描述

我试图注入父组件到子组件。我想这将是简单的＆ndash的;只需指定/在孩子的构造注入父组件（）：

I'm trying to inject a parent component into a child component. I thought this would be straightforward – simply specify/inject the parent component in the child's constructor():

constructor(private _parent:AppComponent) {}   // child component constructor

我收到以下错误：

I get the following error:

例外：无法解析的所有参数ChildComponent（？）。确保他们都有有效的类型或注释。

EXCEPTION: Cannot resolve all parameters for ChildComponent(?). Make sure they all have valid type or annotations.

我是什么失踪？

ChildComponent：

ChildComponent:

import {Component} from 'angular2/core';
import {AppComponent} from './app.component';

@Component({
  selector: 'child',
  template: `<p>child</p>`
})
export class ChildComponent {
  constructor(private _parent:AppComponent) {}
}

AppComponent：

AppComponent:

import {Component} from 'angular2/core';
import {ChildComponent} from './child.component';

@Component({
  selector: 'my-app',
  template: `{{title}} <child></child>
  `,
  directives: [ChildComponent]
})
export class AppComponent {
  title = "Angular 2 - inject parent";
  constructor() { console.clear(); }
}

Plunker

推荐答案

请参阅@ EricMartinez的<一个href=\"http://stackoverflow.com/questions/34540615/how-do-i-inject-a-parent-component-into-a-child-component#comment56823476_34540615\">comment的回答。这个问题似乎是一个循环引用当A进口B和B进口。

See @EricMartinez's comment for the answer. The problem seems to be a circular reference when A imports B and B imports A.

下面是一个 plunker 使用两个文件一个文件而不是在 Eric的plunker 。

Here's a plunker that uses two files instead of the one file that is in Eric's plunker.

这是我原来的plunker唯一的变化是在ChildComponent：

The only change from my original plunker is in the ChildComponent:

import {Component, Inject, forwardRef} from 'angular2/core';
....
constructor(@Inject(forwardRef(() => AppComponent)) private _parent:AppComponent)

我不知道是否这消除了循环引用，因为A和B仍在进口对方，但似乎工作。

I don't know for sure if this eliminates the circular reference, since A and B are still importing each other, but it seems to work.

另请参阅 https://github.com/angular/angular/issues/3216，其中MISKO规定：

See also https://github.com/angular/angular/issues/3216, where Miško states:

这[使用forwardRef不是用户友好宣言（）]是JS的限制和函数的声明是如何被悬挂。只要你有一个循环依赖，你需要 forwardRef :-(我只是不明白一个远在它附近。

This [not user-friendly declaration using forwardRef()] is a limitation of JS and how the function declarations get hoisted. Whenever you have a circular dependency you will need forwardRef :-( I just don't see a away around it.

我认为你不应该在情况下您的父母需要了解孩子，孩子们需要了解的父母。 @Query 应该照顾大多数的用例。

I would argue that you should not be in situation where your parent needs to know about the children and children need to know about parent. @Query should take care of most of the use cases.

我很抱歉，虽然我同意这是在某些罕见的情况下痛，我看不到出路的，因此这个问题不是可操作的，将关闭。

I am sorry, but while I agree this is a pain in some rare cases, I don't see a way out of it, and hence this issue is not actionable, will close.

嗯......我试图注入母公司是因为我看到两种方式为孩子与父母沟通的原因：

Hmm... the reason I tried injecting the parent was because I see two ways for a child to communicate with a parent:

1. 的儿童定义输出属性并发出事件，这对家长赞同


2. 子注入父（例如，面板可能注入选项卡），然后可以调用父方法

和我试图确定何时使用每种方法。 MISKO使得它听起来像2应该是罕见的。

And I was trying to determine when to use each approach. Miško makes it sound like 2. should be rare.

更新：我想了解更多这方面的一些... 1.更好，因为那里是孩子和家长之间的耦合少。随着1.孩子并不需要知道（也许不应该知道）母公司的公共API /接口。结果在相反的方向（例如，家长使用 @ViewChild （ @Query 现在是很precated），以获得对孩子的引用，则调用子方法），耦合是好的，因为父是使用子组件，所以它需要知道儿童的公共API /接口：即，输入输出属性和公共方法。

Update: I was thinking about this some more... 1. is better because there is less coupling between the child and the parent. With 1. the child doesn't need to know (and probably shouldn't know) the public API/interface of the parent.
In the reverse direction (e.g., the parent uses @ViewChild (@Query is now deprecated) to get a reference to the child, then calls methods on the child), the coupling is fine, because the parent is using the child component, so it needs to know the public API/interface of the child: i.e., the input and output properties and public methods.

这篇关于我如何注入父组件成子组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！