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-content который не работает, как он скажет, что showFilters это не известное свойство ng-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;
    }
  }

}

плитка-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>

Обновить

Если вы используете селектор, вам не нужно определять свойство select