在角2中向子注入更高的父组件(而不是直接父)。

Question

我需要注入一个不是直接父组件的父组件。

@Host()装饰器只允许注入直接父组件。

实际例子-菜单和菜单项组件。我想把菜单放在页面上

<menu [name]="'smth'">
  <auth-logout></auth-logout>
  <!-- ... other menu items -->
</menu>

name输入调用菜单上的操作(e.x )。切换)通过菜单服务。任何菜单项子组件都可以包含menu-item组件。

<menu-item (itemClick)="logout()">
  LOGOUT
</menu-item>

和menu-item模板

<div class="menu-item"    
     (click)="onClick()">
  <ng-content></ng-content>
</div>

plnkr http://plnkr.co/edit/ArQZYZsHQgn6I2eK3AZd

我希望将menu组件注入到menu-item中，以调用menu-item单击事件上的close()方法。auth-logout不应该知道这个菜单-组件交互，我不想重复每个菜单项的逻辑。

为什么不像这样包装呢？

<menu>
  <menu-item>
    <auth-logout></auth-logout>
  </menu-item>
</menu>

因为menu-item块有一些样式可以打破对子组件(e.x )的正确单击。并且很难在单击时自动关闭菜单(需要将菜单名称传递给每个组件，如auth-logout或在此组件中添加输出)

为什么不使用来自menu-item的服务调用？因为它需要通过每个菜单项(如auth-logout)将菜单项传递给menu-item，但是像auth-logout这样的组件不应该知道这种交互或菜单名称或其他任何东西。

另一个例子-项目列表与某些项目子组件，它侦听列表更改事件(主题在列表组件)，并做一些事情上发出(e.x。通过添加新的时间戳参数来重置缓存和更新映像)。通过服务传递列表名太复杂了，因为组件嵌套很深(页面上的不同列表需要名称)。

这种情况在ng1中运行良好，require属性允许将任何更高级别的父级注入组件。

更新：

上面的示例可以通过删除@Host()并在构造函数注入(thx @yurzui)中添加遗漏的private来修复。但真正的问题更复杂，这个解决方案没有帮助。这是最新的plnkr。http://plnkr.co/edit/p7Vd4FRpHPRtyEuL6pEZ

差异是添加了具有此模板的header-menu组件。

<menu>
  <ng-content></ng-content>
</menu>

并且将menu注入到menu-item组件中并不适用于此组件嵌套。

header-menu
  menu
    auth-logout
      menu-item

Update/Answer:与header-menu的最后一个案例与这个问题有关，github.com/anged.com/ar角/ does /5126，这还不支持。

Answer 1

只需删除@Host()装饰器，不要忘记private。否则，this.menuComponent将永远是undefined，无需修改private。

constructor (@Optional() private menuComponent: MenuComponent)

柱塞实例

Answer 2

这是修改过的普鲁克尔。

这是一种向下传递实例的方法:使用模板参考变量。

注射对我来说太复杂了。

在app.component.html中：

<menu #mm><!-- use whatever name after # -->
  <auth-logout [menu]='mm'></auth-logout>
</menu>

在auth-logout.Component.html中：

<menu-item (itemClick)="logout()" [menu]="menu">
  LOGOUT
</menu-item>

在auth-logout.Component.ts中：

@Input() menu: MenuComponent;

在菜单中-条目.组件. In：

@Input() menu: MenuComponent;

#mm(MenuComponent的实例)将作为menu传递到auth注销，然后以menu的形式传递到菜单项，然后在菜单项中调用menu.close()。