Angular 2 final - передача данных фильтра из Filter.Component в App.component
Я создал простое приложение для фильтрации, которое работает, когда у меня есть фильтрация и листинг в одном и том же компоненте (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
Заранее спасибо.
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;
}
}
Надеюсь это поможет!!