dart - 接口(interface)的依赖注入(inject)

Question

我有一个包含通用弹出窗口的组件，因此它实现了接口(interface) PopupParent

@Injectable()
@Component(
    //...
)
class SubjectListComponent implements OnInit, PopupParent {
}

泛型类 InfoPopup 需要抽象处理其父级(实现 PopupParent )，所以我想通过其接口(interface)注入(inject)父级(而不是通过其具体类 SubjectListComponent 注入(inject))

class InfoPopup {
  final PopupParent _parent;

  InfoPopup(this._parent);
  //...non relevant code
}

问题是 主题列表组件 已在注入(inject)器中按类注册，因此注入(inject)器将找不到要注入(inject)的内容 InfoPopup 类(class)。

如果我尝试声明我的 主题列表组件 手动，我发现它必须在提供程序常量中完成。但我仍然没有 的实例主题列表组件 当我声明我的组件时...

我怎么能那样做？

我还尝试将父级传递给@Input:

@Component(
    selector: 'info-popup',
    templateUrl: 'info_popup.html',
    styleUrls: const ['info_popup.css'],
)
class InfoPopup {
  @Input()
  final PopupParent parent;

  InfoPopup(this._parent);
  //...non relevant code
}

但后来我陷入了如何注入(inject) 这个来自组件客户端的实例:

subject_list_comp.html:

<div>
  <info-popup [parent]="this"></info-popup>
</div>

因为 dart angular 无法识别 这个作为关键字，但它会搜索名为 的属性这个在 SubjectListComponent.dart

为此问题创建了两个问题:
https://github.com/dart-lang/site-webdev/issues/514
https://github.com/dart-lang/site-webdev/issues/515

Answer 1

这可以通过提供别名来实现。 multi: true允许添加多个别名。无法自动派生接口(interface)。

@Component(
  providers: [
      const Provider(PopupParent, useExisting: SubjectListComponent, multi: true),
      const Provider(PopupParent, useExisting: FooComponent, multi: true)

  ]
)
class InfoPoupup ...

更新

做

[parent]="this" 

工作，你可以在组件中添加一个 setter/getter

get self => this; 

然后使用

[parent]="self"