AngularDart 5如何获取父组件？迁移旧版本代码报错求解

哎，这个问题我升级AngularDart的时候也踩过坑！AngularDart 5对组件依赖注入的规则做了调整，之前3/4版本里隐式支持的父组件注入，到5之后需要显式声明了。

问题原因 #

在AngularDart 3/4中，直接嵌套的子组件可以通过构造函数直接注入父组件，框架会自动把父组件作为依赖提供给子组件。但AngularDart 5移除了这个隐式行为，所以子组件找不到父组件的提供者，就会抛出No provider found for AppComponent的错误。

正确的迁移方式 #

你只需要在子组件的构造函数参数上添加@Host()装饰器，告诉Angular从**宿主组件（也就是包含当前子组件的父组件）**的注入器中查找这个依赖。修改后的代码如下：

@Component( selector: 'my-app', template: '<my-child></my-child>', directives: [ChildComponent])
class AppComponent {}

@Component(selector: 'my-child', template: 'The child')
class ChildComponent {
  final AppComponent _parent;
  // 添加@Host()装饰器显式指定依赖来源
  ChildComponent(@Host() this._parent);
}

补充说明 #

• @Host()装饰器会让Angular在当前组件的宿主上下文（也就是直接包裹它的父组件）中查找依赖，刚好匹配你原来的直接嵌套场景。
• 如果你的子组件可能被多种父组件使用，或者需要更灵活的依赖查找，也可以通过注入Injector实例手动获取父组件，但@Host()是最简洁直接的方案。

内容的提问来源于stack exchange，提问作者Xavier