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 -->

我为此做了一个傻瓜：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来发送接收者所做的消息。

Answer 2

Keith Richards可以告诉你关于摄取祖先的一两件事......

https://www.youtube.com/watch?v=uo5dtPx7P8g

对不起，便宜的玩笑但不得不这样做。

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

2 个答案: