問題タブ [angular2-ngcontent]

私の単純化された目標は、アイテム テンプレートを含むリストであるコンポーネントを構築することです。例えば：

これが私のコードです：

期待される結果：

• アイテム
• アイテム
• アイテム

実結果：

•<br> •<br> • アイテム

私の質問は、<some_selector>接続された with<ng-content select='some_selector'>が親コンポーネントで指定されたかどうかを確認することです。明確にするために例を挙げるかもしれません：

親コンポーネント テンプレート (editor.html) があります。

これが私の編集者です

モーダル コンポーネント テンプレート (modal.html) では、次のような *ngIf ステートメントを使用します。

<mfoot>タグがタグ内のエディター テンプレートで使用されている場合、div.modal-footer を表示しないようにします<modal>。では、メソッドを実装するhasNgContent()方法は？または angular2 にある可能性があり、タグが親コンポーネントタグで使用されたかどうかを*ngIf検出できる、より直接的なステートメントがあります。<mfoot>

ngStyle を ng-content にバインドしようとしましたが、機能しません。以下の例を参照してください。

インターネットで検索すると、以下のソリューションしか見つかりません。

=> https://plnkr.co/edit/T5CoP5qmd4nzIPAFjLNQ?p=previewより

ただし、スタイル値を動的に変更することはできません。

私が達成しようとしているのは、各行のビューがそれを使用するマスターコンポーネントによってコンポーネントで任意に定義されている場合に、行を動的に追加および削除できる任意のオブジェクトの配列にバインドされた汎用コンポーネントです。

これMasterComponentは、さまざまなページに実装される任意のコンポーネントであり、自己完結型であり、メタデータや外部ソースによって定義されていないことに注意してください。

私がこれまでに持っているのは、次のコンポーネントです。

RepeaterComponent テンプレート:

マスター コンポーネント テンプレート:

この<field-textbox>コンポーネントは、使用する必要のある追加データを保持する単純な入力をカプセル化するために使用するカスタム コンポーネントです。

MasterComponentは、このインスタンスでは次のようなオブジェクトを保持します。

このアプローチには、解決策が見つからないように見える 2 つの問題があります。

1. テンプレートを複製すると、セレクターはすべての行で同一になり、レンダリング後にトランスクルージョンポイントが1つだけ残りng-contentます。ngForng-content
2. トランスクルードされたディレクティブの宣言rowから変数への参照がないため、データを正しくバインドできません。ngFor<field-textbox>

さまざまな任意の構造とさまざまなテンプレートRepeaterComponentをさらに新しく作成するための労力を最小限に抑える、を実装するためのより良いアプローチはありますか?MasterComponents

DropdownComponentトランスクルードされたボタン (または他の適切な要素または Angular コンポーネント) がドロップダウンをトリガーできるようにする と、ドロップダウンに表示する必要があるコンテンツのトランスクルードされた div を実装しようとしています。このコンポーネントの使用方法は次のようになります。

DropdownComponentカスタムCSSクラスをバインドするには、そのボタンへの参照を取得する必要があります。

次のように、上記のコードに css クラスを追加し、 を使用してその参照を取得できますgetElementsByClassName()。

しかし、より簡単に使用できるようにするために、コンテンツを透過してボタンへの参照を取得するために使用される属性DropdownComponentを使用したいと思います。originこのようなもの、

これを達成する方法はありますか？または、これを行うより良い方法はありますか？

注: 私のドロップダウン html は次のとおりです。

Angular 2.0.1 を使用しています。

他のコンポーネントを介して取り込むことができるコンポーネントがあります<ng-content>-これはうまく機能します。

私が遭遇する問題は、注入されたコンポーネントを参照したいときです。

<ng-content>それが 1 つのコンポーネントに過ぎないこと を知っていれば、次のように言うことができます。@ContentChild(MyComponent) dynamicTarget: IMyComponent;しかし、それは任意のコンポーネントである可能性があるため (注入されたコンポーネントが特定のインターフェイスを実装しているという唯一の仮定はあります)、より複雑になります。

私も試してみましたが<ng-content #dynamicTarget'>、それを言って参照しました @ContentChild('dynamicTarget') dynamicTarget: IMyComponent;が、これは未定義を返します。

これがコンポーネントのインスタンスであることをAngular 2に伝えて、関数を呼び出せるようにする方法を知っている人はいますか?

ユース ケースをさらに明確にするために、任意のコンポーネントをコンテンツとして取り込むことができるマルチステップ ウィザードがあり、validateコンテンツに対して関数を呼び出したいと考えています (これも、前述のインスタンスに存在すると仮定します)。

を使用するコンポーネントを構築していますがng-content、ネストされた scss または StylesUrl を使用するときに使用できないことがわかりました。:host >>>

例えば ​​：

.has-divider私のネストされた.search-linkものが機能しない理由と、コンテンツを .scss ファイル内に配置して使用すると、.scss ファイルで機能しないstyleUrls理由を誰かに教えてもらえますか:host。これは予想されることですか、それともおそらくバグですか

理想的には、ネストされたscssからおよび外部scssファイルを引き続き使用できるようにしたいと思います

次のコンポーネントがある場合 (セレクター my-template を使用):

次のように使用します。

入力が無効であっても、フォームは常に有効です。入力が無効な場合にフォームが無効になるようにするにはどうすればよいですか?

ライブデモ: https://plnkr.co/edit/lWUe6oeBk6ccsE2JxNKb?p=preview

ng-content や TemplateRef などを介してカスタム列定義をトランスクルードすることは可能ですか? サイト ( http://www.telerik.com/kendo-angular-ui/components/grid/ )で利用可能な Kendo UI Grid plunkerとAngular2 子コンポーネントをデータとしてテストしましたが、役に立ちませんでした。ng-content select も試しましたが、何も試しませんでした。どんな助けでも大歓迎です、ありがとう！