如何在 Angular2 中注入间接祖先组件

Question

在 Angular2 中，可以通过简单地使用以下语法将 parent 甚至祖先（例如 grandparent）组件注入 child：

export class Grandchild {
   constructor( @Optional() @Host() @Inject(forwardRef(() => Ancestor)) ancestor)
}

但是，这似乎只适用于在单个模板中定义的 ancestor-grandchild 关系，如下所示：

<!-- App component template -->
<ancestor>
  <foobar>
    <grandchild></grandchild>  <!-- injection works -->
  </foobar>
</ancestor>

如果我们的模板如下所示，注入将不起作用：

<!-- App component template -->
<ancestor>
  <foobar></foobar>
</ancestor>

<!-- Foobar component template -->
<grandchild></grandchild>  <!-- injection doesn't work -->

我为此做了一个plunker：http://plnkr.co/edit/D9iSokONIAFAS8G1NTd1

Answer 1

您可以提供共享服务并使用它进行交流。

@Injectable()
class SharedService {
  grandParent = new BehaviorSubject();
}

@Component({
  selector: 'grand-parent',
  providers: [SharedService],
  ...
})
class GrandParent {
  constructor(sharedService:SharedService) {
    sharedService.grandParent.next(this);
  }
}

@Component({
  selector: 'descendant',
  providers: [],
  ...
})
class Descendant {
  constructor(@Optional() sharedService:SharedService) {
    if(sharedService) {
      sharedService.grandParent.subscribe(grandParent => this.grandParent = grandParent);
    }
  }
}

在实践中，我不会发送对 this 的引用，而是使用可观察对象发送消息，接收者会根据这些消息进行操作。

如何在 Angular2 中注入间接祖先组件

How to inject an indirect ancestor component in Angular2

inject

parent

ancestor

angular