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) и передать значения полей выбора обратно компоненту листинга (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;
  }
}

Надеюсь это поможет!!