Angular2:父子组件通信,@ Host和forwardRef

时间:2016-01-08 06:23:03

标签: angularjs angular angular2-injection

我正在尝试新发布的Angular2 beta 0,并希望有人可以为我澄清一些事情。

我有一个AppComponent,它作为我项目的主要框架。它的模板创建了一个导航栏,其项目在其ngOnInit上被读入AppComponent的公共变量(称为“项目”)。 * ng然后渲染项目。这很好。

在AppComponent模板的底部是一个div,其中放置了一个路由器插座。根据用户选择的路线被触发,并且渲染不同的子组件。这也很好。在其中一个子组件中,我需要引用父AppComponent中的变量“items”。我尝试了三种方法将AppComponent传递给构造函数中的SubComponent:

1. constructor(@Host() _host: AppComponent)
2. constructor(@Inject(forwardRef(() => AppComponent)) _host)
3. constructor(@Host() @Inject(forwardRef(() => AppComponent)) _host)

方法1在运行时失败,出现“无法解析SubComponent的所有参数”之类的错误,而方法2和3有效,但我不明白为什么。当调用SubComponent的构造函数时,会导致人们认为AppComponent未定义,这是不可能的,因为SubComponent不能存在,除非它在AppComponent模板的路由器出口中呈现。但前向参考确实有效。

我可以发布更多代码,但我想我在这里遗漏了一些概念。

附带问题 - 我在之前的alpha版本中看到装饰器@View经常用于组件定义,例如指定模板。在目前Angular网站上的所有示例中,我从未看到@View但只看到@Component装饰器。 @View现在已经过时了吗?

非常感谢!!!

1 个答案:

答案 0 :(得分:1)

对于你方面的问题:@View现在是可选的(如果它不存在,那么你需要在@Component中设置'templateURL'或'template') - 这个更改是在2.0.0-alpha.40版本中进行的(https://github.com/angular/angular/blob/master/CHANGELOG.md#200-alpha40-2015-10-09