2

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

简短说明：

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

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

我看过这篇文章，但我不喜欢我必须手动绑定 HTML 中的所有属性app.ts，因为我必须在任何我想使用它的地方都这样做。

我已经添加showFilters="showFilters"或尝试[showFilters]="showFilters"了ng-contentwhich 不起作用，因为它会说它showFilters不是ng-content.

有没有办法做到这一点，所以我在使用组件时不必一直设置它。有什么事情@ContentChilds或事件？

我希望它的工作方式是，当我单击tile-filters组件中的按钮时，它会关闭并tile-search更新，因此它将占据全宽。当我然后单击一个按钮时，tile-search它应该tile-filters再次显示并且两者共享空间。（将来我想添加更多具有相同属性的组件）

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

瓷砖.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;
    }
  }

}

平铺过滤器.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;
  }

}

平铺搜索.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';

  }
}
4

0 回答 0