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

Question

我创建了一个简单的过滤应用程序，当我在同一个组件 (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) 并将 select 框的值传递回列表组件 (app.ts ) 适当地使用@Input 和@Output 函数。

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

提前致谢。

Answer 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;
  }
}

希望对您有所帮助！！

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

Angular 2 final - Passing Filter Data from Filter.Component to App.component

typescript

angular2-forms

angular2-template

angular2-inputs

angular