問題タブ [angular2-ngcontent]

次のコンポーネントがあるとします (「MyModalComponent」と呼びましょう)。

MyModalComponent

このように使用すると、完全に機能します。

• タイトルは<div class="my-modal-header">div内でレンダリングされます
• 残りのコンテンツは<div class="my-modal-body">div に入ります

ただし、html を別のコンポーネントにラップすると、セレクター プロジェクションが機能しなくなります。

MyModalContentComponent

これで、すべての html コードが MyModalComponent の「フォールバック」<ng-content></ng-content>スロット (つまり、<div class="my-modal-body">div 内) にレンダリングされます。
この場合、セレクターはもう機能していないようです。

これは「設計による」ものですか、それとも、HTML マークアップを MyModalComponent に直接配置した場合と同じように動作し続けることを確認するにはどうすればよいですか?

私はAngular 8を使用しています

canvas親コンポーネント内の異なる子コンポーネントに表示する必要がある要素がありますが、そのデータは同じでなければなりません。

この状況を解決するために、次ng-contentのような子コンポーネントで使用しました

コンポーネントAとBには HTML が含まれています

そして、ParentComponentは

app-canvas-childコンポーネントには要素canvasがあります

canvas-child.component.html

ただし、親コンポーネントでは、コンポーネントからCanvas Successタイトルが表示されますapp-canvas-childが、キャンバス領域は空白です。親コンポーネントで直接（ng-templateの外部で）同じように使用すると、正常に機能し、キャンバスが表示されます。

私の目標は、コンポーネント 1 のデータで HTML をレンダリングするコンポーネント 2 の HTML の一部を選択することです。

これは私のアプローチのデモ疑似コードです:

コンポーネント 1

コンポーネント 2

私の質問をうまく説明できたことを願っています。前もって感謝します。

Angular アプリの入力の周りに動的コンテンツをレンダリングする必要があります。

私のアイデアは、カスタム コンポーネントを作成し、それを使用ng-contentして動作をその入力にバインドすることでした。そのようです：

そして、私のラッパーは以下のようなものになります。

HTML:

そして .ts 関数:

今、私はそれng-contentが実際には存在しないことを知っており、そのコンテンツは複数の要素である可能性があるため、実際には参照を配置できないことを知っていますが、使用する代わりに「角度のある方法」でアクセスする方法はありますか?ブルートフォース、つまりネイティブ要素？