Question

我尝试为我的应用制作一些可以协同工作的组件。

简短说明：

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

我的目标是在tile组件上设置一个属性，然后在子组件中使用该属性。我在ng-content组件中使用tile，因此我可以按正确的顺序放置子组件，并且能够自动绑定属性，因此在使用这些组件的任何地方我都不必这样做。

我见过this post，但我不喜欢我必须在app.ts中手动绑定HTML中的所有属性，因为那时我必须在我想要的任何地方执行此操作使用它。

我已添加showFilters="showFilters"或尝试[showFilters]="showFilters"到ng-content这不起作用，因为它会说showFilters它不是{{1}的已知属性1}}。

有没有办法做到这一点，所以我不必在使用组件时一直设置它。有ng-content或事件的东西吗？

我希望它如何工作，当我点击@ContentChilds组件中的某个按钮时，它会关闭，tile-filters将更新，因此它将占据全宽。当我点击tile-search上的按钮时，它应该再次显示tile-search，并且两者共享空间。（将来我想添加更多使用相同属性的组件）

下面的组件示例或工作Plunker here。

tile.ts

tile-filters

瓦片filters.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;
    }
  }

}

瓦片search.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;
  }

}

并将它们放在一起的 app.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;
  }

}

Angular2：通过ng-content

0 个答案: