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

Question

在 Angular2 中，只需使用以下语法，就可以将父组件甚至祖先（例如祖父母）组件注入子组件：

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

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

<!-- 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 的引用，而是使用 observables 来发送接收者操作的消息。