Angular 2 final - 将过滤器数据从 Filter.Component 传递到 App.component答案

【问题标题】：Angular 2 final - Passing Filter Data from Filter.Component to App.componentAngular 2 final - 将过滤器数据从 Filter.Component 传递到 App.component
【发布时间】：2017-02-01 06:39:48
【问题描述】：

我创建了一个简单的过滤应用程序，当我在同一组件 (app.ts) 中进行过滤和列表时：http://plnkr.co/0eEIJg5uzL6KsI70wWsC

@Component({
  selector: 'my-app',
  template: `
  <select name="selectmake" [(ngModel)]="makeListFilter" (ngModelChange)="selectMake()">
    <option *ngFor="let muscleCar of muscleCars" [ngValue]="muscleCar">{{muscleCar.name}}</option>
  </select>

  <select name="selectmodel" [(ngModel)]="modelListFilter">
    <option *ngFor="let m of makeListFilter?.models" [ngValue]="m.model">{{m['model']}}</option>
  </select>

  <button class="btn btn-default" type="submit" (click)="searchCars()">FILTER</button>

  <ul>
    <li *ngFor="let _car of _cars | makeFilter:makeSearch | modelFilter:modelSearch">
        <h2>{{_car.id}} {{_car.carMake}} {{_car.carModel}}</h2>
    </li>
  </ul>`,
  providers: [ AppService ]
})

export class App implements OnInit {
  makeListFilter: Object[];
  modelListFilter: string = '';

  _cars: ICar[];

   constructor(private _appService: AppService) { }

  ngOnInit(): void {
    this._appService.getCars()
        .subscribe(_cars => this._cars = _cars);
  }

  selectMake() {
    if(this.modelListFilter) {
      this.modelListFilter = '';
    }
  }
  searchCars() {
    this.makeSearch = this.makeListFilter['name'];
    this.modelSearch = this.modelListFilter;
  }

我想要实现的是将过滤移动到它自己的组件（filtering.component.ts）中，并使用@Input和@Output函数将选择框的值传递回列表组件（app.ts）适当的。

我已经在这里分离了组件，但是我无法将数据传递给列表组件。 (app.ts)：http://plnkr.co/1ZEf1efXOBysGndOnKM5

提前致谢。

【问题讨论】：

标签： angular typescript angular2-template angular2-forms angular2-inputs

【解决方案1】：

点击按钮时必须输出，

看到这个Plunker

过滤组件

export class FilterComponent {
  @Output() filtercars: EventEmitter<{make: string, model: string}> = new EventEmitter<{make: string, model: string}>();

  makeListFilter: Object[];
  modelListFilter: string = '';

  constructor(private _appService: AppService) {}

  selectMake() {
    if(this.modelListFilter) {
      this.modelListFilter = '';
    }
  }

  searchCars() {
    this.filtercars.emit({make: this.makeListFilter['name'],model: this.modelListFilter});
  }

  muscleCars = [
    {
      id: 1, name: "Chevrolet", models: [
        { model: "Camaro" },
        { model: "Corvette" }
      ]
    },
    {
      id: 2, name: "Dodge", models: [
        { model: "Challenger" },
        { model: "Charger" },
        { model: "Viper" }
      ]
    },
    {
      id: 3, name: "Ford", models: [
        { model: "GT" },
        { model: "Mustang" }
      ]
    }
  ];
}

应用组件

@Component({
  selector: 'my-app',
  template: `
  <filter-app (filtercars)='filtercars($event)'></filter-app>
  <ul>
    <li *ngFor="let _car of _cars | makeFilter:makeSearch | modelFilter:modelSearch">
        <h2>{{_car.id}} {{_car.carMake}} {{_car.carModel}}</h2>
    </li>
  </ul>`,
  providers: [ AppService ]
})
export class App implements OnInit {

  @Input() makeSearch: Object[];
  @Input() modelSearch: string = '';

  _cars: ICar[];

  constructor(private _appService: AppService) { }

  ngOnInit(): void {
    this._appService.getCars()
        .subscribe(_cars => this._cars = _cars);
  }

  filtercars(filter){
     this.makeSearch = filter.make;
    this.modelSearch = filter.model;
  }
}

希望这会有所帮助！

【讨论】：