Question

我正在创建一个角度自定义下拉列表组件，以便在我的所有页面中将其用作控件。

这是HTML模板：

<select class="form-control" [(ngModel)]="value">
        <option [ngValue]="item" *ngFor="let item of list">{{item.Name}}</option>
</select>

这是其背后的Typescript代码：

@Component({
    selector: 'dropdown',
    templateUrl: './dropdown.component.html'
})
export class DropdownComponent {
    @Input() list: LookupModel[];

    @Input()
    value: LookupModel;

    @Output()
    valueChange: EventEmitter<LookupModel>;

    constructor(private elementRef: ElementRef) {
        this.valueChange = new EventEmitter();
    }

    select(value: LookupModel) {
        this.valueChange.emit(value);
    }
}

以下是我如何使用它：

<dropdown [list]="projectsList" [(value)]="selectedProject"></dropdown>

这个组件工作正常。我想创建一个类似下面的变更事件处理程序：

<select name="projectField" class="form-control" [(ngModel)]="selectedProject" (change)="filterBuilding()">
     <option [ngValue]="project" *ngFor="let project of projectsList">{{project.Name}}</option>
</select>

是的，有人可以帮我吗？有没有办法在我的自定义控件中包含普通的HTML事件处理程序？或者我只需要手动处理它？</ p>

如果我必须手动处理它，如何发送一个方法，我只是发送一个指向我的函数的指针，这个方法的作用是执行传递给它的任何函数？

感谢。我需要控件的最终输出如下：

<dropdown [list]="projectsList" [(value)]="selectedProject" (change)="filterBuilding()"></dropdown>

Answer 1

使用ngModelChange检测模型的变化：

(ngModelChange)="filterBuilding($event)"

Answer 2

我设法解决了它，在下拉列表的HTML模板中我添加了（更改）事件

<select class="form-control" [(ngModel)]="value" (change)="valueChange(value)">
        <option [ngValue]="item" *ngFor="let item of list">{{item.Name}}</option>
</select>

并在typescript代码中告诉valueChange方法发出函数：

@Component({
    selector: 'dropdown',
    templateUrl: './dropdown.component.html'
})
export class DropdownComponent {
    @Input() list: LookupModel[];

    @Input()
    value: LookupModel;

    @Output()
    onChange: EventEmitter<any>;

    constructor(private elementRef: ElementRef) {
        this.onChange = new EventEmitter();
    }

    valueChange(value: LookupModel) {
        this.onChange.emit(value);
    }
}

这就是我现在使用它的方式：

<dropdown [list]="projectsList" [(value)]="selectedProject" (onChange)="filterBuilding($event)"></dropdown>

Angular 4：自定义组件“控件”

2 个答案: