直接の親ではない親コンポーネントを注入する必要があります。
@Host() デコレータでは、直接の親コンポーネントのみを挿入できます。
実際の例-メニューおよびメニュー項目コンポーネント。ページにメニューを配置したい
<menu [name]="'smth'">
<auth-logout></auth-logout>
<!-- ... other menu items -->
</menu>
nameinputは、メニューサービスを介してメニューのアクション（トグルなど）を呼び出します。すべてのメニュー項目の子コンポーネントには、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-itemclose()menu-itemauth-logout
そのように包んでみませんか？
<menu>
<menu-item>
<auth-logout></auth-logout>
</menu-item>
</menu>
のでmenu-itemブロックは、いくつかのスタイルを持っている子コンポーネント（EXパディング）と、それはクリックで自動的に閉じ、メニューには難しいの休憩適切クリックすると（のような各構成要素にメニュー名を渡すために必要であることauth-logoutや、このコンポーネントに出力を追加します）
からのサービスコールを利用しないのはなぜmenu-itemですか？メニュー名を各メニュー項目（のようなauth-logout）からに渡す必要があるためですmenu-itemが、のようなコンポーネントauth-logoutは、この相互作用やメニュー名などについて何も知らないはずです。
もう1つの例-リスト変更イベント（リストコンポーネントのサブジェクト）をリッスンし、emitでいくつかの処理を実行するアイテムサブコンポーネントを含むアイテムリスト（例：src新しいタイムスタンプパラメータを追加してキャッシュをリセットし、画像を更新することによるアイテム画像の更新）。コンポーネントのネストが深いため、サービスを介して対話するためにリスト名を渡すのは複雑すぎます（ページ上のリストが異なるため、名前が必要です）
このケースはrequire、コンポーネントに上位レベルの親を挿入できるプロパティを持つng1でうまく機能します
更新：
上記の例@Host()はprivate、コンストラクターinject（thx @yurzui）で欠落しているものを削除および追加することで修正できます。しかし、実際の問題はもっと複雑であり、この解決策は役に立ちません。ここに更新されたplnkrがあります。http://plnkr.co/edit/p7Vd4FRpHPRtyEuL6pEZ
違いはheader-menu、このテンプレートを持つ追加コンポーネントです
<menu>
<ng-content></ng-content>
</menu>
またmenu、menu-itemコンポーネントへの注入は、このコンポーネントのネストでは機能しません
header-menu
menu
auth-logout
menu-item
更新/回答：header-menuこの問題の最終的なケースはgithub.com/angular/angular/issues/5126であり、これはまだサポートされていません。
@Host()デコレータを削除するだけで、忘れないでくださいprivate。それ以外の場合this.menuComponentは、常に変更undefinedなしになりprivateます。
constructor (@Optional() private menuComponent: MenuComponent)
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加