Angular2 : ng-content를 통해 하위 구성 요소로 바인딩

Question

내 응용 프로그램과 함께 작동하는 몇 가지 구성 요소를 만들려고합니다.

짧은 설명 :

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

내 목표는 다음 하위 구성 요소에서 사용되는 tile 구성 요소의 속성을 설정하는 것입니다. tile 구성 요소에 ng-content을 사용하므로 올바른 순서로 하위 구성 요소를 배치하고 자동으로 등록 정보를 바인딩 할 수 있으므로 이러한 구성 요소를 사방에 사용하지 않아도됩니다.

나는 this post을 보았지만, 수동으로 바인딩해야한다는 점이 마음에 들지 않는다. app.ts에 HTML의 모든 속성을 바인딩해야한다. 나는 그것이 ng-content의 알려진 속성이 아닙니다 showFilters 것을 말할 것이다대로 작동하지 않습니다되는 ng-content에 [showFilters]="showFilters"을 showFilters="showFilters"를 추가하거나 시도

.

이 방법이 없으므로 구성 요소를 사용할 때 항상 설정하지 않아도됩니다. @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; 
    } 

} 

그리고 난을 넣어 t 모두 함께 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] 괄호 안에 봉입한다.

참고이 속성이 선택 속성이

를 정의 할 필요가 없습니다 당신이 선택을 사용하는 경우 타일의 구성 요소를 사용하고

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

업데이트

을 ngcontent하지 않는 경우에 사용한다