时间戳

首页 > 解决方案 > Angular Material 自动完成共享模块

angular - Angular Material 自动完成共享模块

问题描述

我在多个组件中使用角度材料自动完成输入，它看起来总是一样的：

form.component.html

<mat-form-field>
    <mat-label>Name</mat-label>
    <input matInput aria-label="Name" [matAutocomplete]="auto" [formControl]="nameCtrl" type="text">
    <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let name of filteredNames | async" [value]="name.adlogin">
            <span>{{ name.displayname }}</span>
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

form.component.ts

export class FormComponent {

    nameCtrl: new FormControl();
    filteredNames: Observable<any[]>;
    nameList: any = [];

    constructor() {
        this.filteredNames = this.nameCtrl.valueChanges
        .pipe(
            startWith(''),
            map(name => name ? this.filterStates(name) : this.nameList.slice())
        );
    }

    filterStates(name: string) {
        return this.nameList.filter(name => {
            const searchStr = name.displayname.toLowerCase();
            return searchStr.indexOf(name.toLowerCase()) !== -1;
        });
    }

}

如果组件中需要它，我应该怎么做才能创建可以导入的共享模块？

标签： angularautocompleteangular-material

解决方案

您需要从这个名为“Autocomplete.component.html”的组件以及 ts.xml 中创建一个组件。您还应该拥有带有选择器的元数据。

然后创建一个 SharedModule 并在 export 下的声明中导入组件。

现在，您应该能够通过在导入下导入 SharedModule 来在其他模块中的任何位置使用该组件。

推荐阅读