アプリで連携するいくつかのコンポーネントを作成しようとしています。

簡単な説明:

私の目標はtile、子コンポーネントで使用されるコンポーネントにプロパティを設定することです。コンポーネントで使用するng-contentのでtile、子コンポーネントを正しい順序で配置し、プロパティを自動的にバインドできるため、これらのコンポーネントを使用するすべての場所でこれを行う必要はありません。

この投稿を見たことがありますが、HTML のすべてのプロパティを手動でバインドする必要があるのは好きではありませんapp.ts。

の既知のプロパティではないと言うので、動作しないを追加showFilters="showFilters"または試し[showFilters]="showFilters"ました。ng-contentshowFiltersng-content

これを行う方法はありますか?コンポーネントを使用するときに常に設定する必要はありません。@ContentChildsまたはイベントと何か？

私がそれをどのように機能させたいかというと、tile-filtersコンポーネントのボタンをクリックすると、それが閉じられてtile-search更新されるため、全幅になります。次にボタンをクリックすると、再び表示され、両方がスペースを共有するtile-searchはずです。tile-filters(将来的には、同じプロパティで動作するコンポーネントをさらに追加したいと考えています)

以下のコンポーネントの例または動作中のプランカーはこちら.

tile.ts

tile-filters.ts

tile-search.ts

そして、すべてをまとめると app.ts

私は angular2 でかなり新しく、トランスクルージョンを使用してコンテンツを単純に再配置する「グリッド」と呼ばれる小さな角度コンポーネントを作成しようとしています。

そのテンプレート

グリッド コンポーネント テンプレート (grid.component.ts)

これは、それを使用する親コンポーネントの一部です。

親テンプレート

これがプランカーです。

しかし、結果にはコンテンツが表示されません。しかし、使用...

それは正常に動作し、結果は期待どおりでした。

この最後の作業ケースのプランカー。

ngfor などを使用してこの結果を得ることができます。

インデックスの使用を避けるために nth-child css 疑似クラスを使用しようとしましたが、うまくいきません。

アップデート

@yurzui (Thanks!!) の回答に基づいて、いくつかの進歩を遂げました。grid-item-index値を持つコンテンツを、同じgrid-item-index値を持つビュー コンテナーにマップできます。

親.コンポーネント.html

grid-item-index ディレクティブ

grid.component.ts

このプランカーをチェック

目標は、リストからコンポーネントを動的にロードし、関連するタブで表示することです。 タブを作成するための私のアプローチは、このチュートリアルに基づいています: https://julistr.com/blog/2016/02/learning-ng2-creating-tab-component/および

これは、各コンポーネントをタブでラップしてハードコードしたい場合に最適です。悲しいことに、ng-content でコンポーネントを動的にロードしようとすると、このアプローチは失敗します。

私は yurzui によるこの回答を見ました。私が達成しようとしているものに非常に近いng-content を使用して angular2 コンポーネントを動的に作成します。

以下のコード ブロック (上記のリンクを参照) は、この例と私の例の間のギャップを埋めることができない場所です。私の例では、 createComponent() に渡すパラメータがわかりません。そして、このコードをどこに置くか、現在、このコードを保持する createTab ディレクティブがあります。「tabs」要素または「tab」要素にディレクティブを配置する必要がある場合は、オンにし続けます。

お持ち帰りのメッセージは、動的に作成されたコンポーネントをタブの ng-content の代わりに配置したいということです。そして、タブの ng-content はタブで埋められます。

これは、これを達成するための私の弱い試みです。http://plnkr.co/edit/ieSNgqusP0rwZBMQSvYQ?p=preview