Question

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

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;
        });
    }

}

如果组件中需要导入共享模块，我应该怎么做？

Answer 1

您需要从这个名称为“ Autocomplete.component.html”以及ts的组件中创建一个组件。您还应该将元数据与选择器一起使用。

然后创建一个SharedModule，并将组件导入声明中的出口下。

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

Angular Material自动完成共享模块

1 个答案: