Angular2：通過ng-content與子組件綁定

Question

我嘗試製作一些爲我的應用程序一起工作的組件。

簡短說明：

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

我的目標是建立，然後在子組件所使用的tile組件的屬性。我在tile組件中使用ng-content，所以我可以按照正確的順序放置子組件，並且可以自動綁定屬性，所以我不必在每個使用這些組件的位置都這樣做。

我看過this post，但我不喜歡它，我必須手動綁定HTML中的所有屬性app.ts，因爲那樣我就必須在任何需要使用它的位置執行此操作。

我已經加入showFilters="showFilters"或試圖[showFilters]="showFilters"到ng-content不工作，因爲它會說，showFilters它不是ng-content已知屬性。

有沒有辦法做到這一點，所以我沒有使用組件時設置這一切的時候。與@ContentChilds或事件？

我希望它的工作原理是，當我點擊tile-filters組件中的一個按鈕時，它會被關閉，tile-search將會更新，因此它將佔滿全部寬度。當我然後點擊tile-search上的按鈕時，它應該再次顯示tile-filters並且共享這個空間。 （在未來，我想添加更多與相同性質的工作部件）

下面的部件或工作Plunker here的例子。

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; 
    } 
    } 

} 

瓦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; 
    } 

} 

瓦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'; 

    } 
} 

Answer 1

你失蹤的。（點）表示的類選擇

<ng-content select=".tile-filters" showFilters="showFilters"></ng-content> 
     <ng-content select=".tile-search" showFilters="showFilters"></ng-content> 

showFilters還處於輸入屬性和應括確定括號[showFilters]內部。

注意這個屬性應該當您使用的瓦組件，而不是ngcontent

<tile [showFilters]="showFilters"> </tile> 

更新

如果你正在你不必有選擇屬性定義

使用選擇使用