我基于mat-checkbox.
<ul>
<li *ngFor="let value of values">
<mat-checkbox [(ngModel)]="value.active" (ngModelChange)="emitState()">
{{value.title}}
</mat-checkbox>
</li>
</ul>
---
import { Component, forwardRef } from '@angular/core';
import { FilterState } from '../filter-state.model';
import { FilterComponent } from '../filter.component';
@Component({
selector: 'my-checkbox-filter',
templateUrl: './checkbox-filter.html',
styleUrls: ['./checkbox-filter.scss'],
providers: [
{
provide: FilterComponent,
useExisting: forwardRef(() => CheckboxFilterComponent),
},
],
})
export class CheckboxFilterComponent extends FilterComponent {
constructor() {
super();
}
getState(): FilterState {
return {
name: this.name,
value: this.values
.filter((value) => value.active)
.map((value) => value.value),
};
}
}
my-checkbox-filter用于另一個組件，app/page/search-page/：
// simplified example
<my-checkbox-filter name="checkbox" [values]="checkBoxValues"></my-checkbox-filter>
---
import { myCheckboxFilter } from '../../shared/my-checkbox-filter';
checkBoxValues = [
{
value: 'yesterday',
title: `Yesterday`,
active: false,
},
{
value: 'tomorrow',
title: `Tomorrow`,
active: false,
}
]
...
// here I would like to detect the filter change
// isChange(event) {
// console.log("filter is changed")
// }
問題是我想(change)在my-checkbox-filter. 如何使此連接正常作業，或者如何將更改事件從search-pageto傳遞my-checkbox-filter？
謝謝！
uj5u.com熱心網友回復：
首先將 $event 添加到您的 ngModelChange 處理程式中為 (ngModelChange)="emitState($event)" 然后在 my-checkbox-filter 中使用 @output 并在 emitState 函式中發出輸出 eevnt 就像
@Output()
filterCheckBoxValueChanged= new EventEmitter<boolean>();
.
.
.
emitState(checked: boolean){
this.filterCheckBoxValueChanged.emit(checked)
}
然后在父類中系結回傳值創建屬性“isFilterCheckBoxChecked”以將其與HTML中的filterCheckBoxValueChanged系結，如
<my-checkbox-filter name="checkbox" [values]="checkBoxValues" (filterCheckBoxValueChanged)="isFilterCheckBoxChecked"></my-checkbox-filter>
和
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/370087.html