angular - Angular2: ng-content を介して子コンポーネントとバインドする

Question

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

簡単な説明:

<tile>
  <tile-filters></tile-filters>
  <tile-search></tile-search>
</tile>

私の目標は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

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'tile',
  template: `
    <div class="row">
      <ng-content select="tile-filters" showFilters="showFilters"></ng-content>
      <ng-content select="tile-search" showFilters="showFilters"></ng-content>
    </div>
  `
})
export class TileComponent implements OnInit {
  @Input() showFilters: boolean;

  constructor() { }

  ngOnInit() {
    if (this.showFilters == null) {
      this.showFilters = false;
    }
  }

}

tile-filters.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'tile-filters',
  template: `
    <section class="tile" *ngIf="showFilters">
      <div class="tile-header dvd dvd-btm">
        <h3 class="custom-font">Search Filters</h3>
        <button class="btn btn-primary" (click)="close()">Close</button>
      </div>
      <div class="tile-body">
        <ng-content></ng-content>
      </div>
    </section>
  `
})
export class TileFiltersComponent implements OnInit {
  @Input() showFilters: boolean;

  constructor() { }

  ngOnInit() {
    this.showFilters = true;
  }

  close() {
    this.showFilters = false;
  }

}

tile-search.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'tile-search',
  template: `
    <section class="tile">
      <div class="tile-body">
        <button class="btn btn-primary left-side" (click)="openFilters()">
          Search options
        </button>
        <div class="input-container">
          <input type="text"
                 name="TileSearch"
                 autocomplete="off"
                 class="form-control"
                 placeholder="{{placeholder}}"
                 [(ngModel)]="query">
        </div>
      </div>
    </section>
  `
})
export class TileSearchComponent implements OnInit {
  @Input() showFilters: boolean;
  @Input() placeholder: string;
  @Input() query: string;

  constructor() { }

  ngOnInit() {
  }

  openFilters() {
    this.showFilters = true;
  }

}

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

@Component({
  selector: 'my-app',
  template: `
    <div class="page">
      <tile [showFilters]="showFilters">
        <tile-filters class="col-md-3">
          My awesome filters
        </tile-filters>

        <tile-search [ngClass]="{'col-md-9': showFilters, 'col-md-12': !showFilters}" 
                     [placeholder]="placeholder" 
                     [query]="query">
        </tile-search>
      </tile>
    </div>
  `,
})
export class App {
  showFilters: boolean;
  placeholder: string;
  query: string;

  constructor() {
    this.showFilters = true;
    this.placeholder = 'Enter search query here';

  }
}