import { MdAutocomplete } from '@angular/material'; @Component({ template:' <input type="text" [mdAutocomplete]="auto"/> <md-autocomplete #auto="mdAutocomplete" #autoComplete> <md-option> Some Options </md-option> </md-autocomplete>' }) export class AutoComplete { @ViewChild('autoComplete') autoComplete: MdAutocomplete; closeAuto() { this.autoComplete.closePanel(); } }
它不是完整的代码,但想法是在方法中调用closePanel. closePanel在https://material.angular.io/components/autocomplete/api上列为方法,但无法正常工作.它说找不到方法.
尝试过这种方法
import { MdAutocompleteTrigger } from '@angular/material'; @Component({ template:' <input #autoCompleteInput type="text" [mdAutocomplete]="auto"/> <md-autocomplete #auto="mdAutocomplete" #autoComplete> <md-option> Some Options </md-option> </md-autocomplete>' }) export class AutoComplete { @ViewChild('autoCompleteInput') autoComplete: MdAutocompleteTrigger; closeAuto() { this.autoComplete.closePanel(); } }
如果未指定read选项,Angular默认从html元素读取ElementRef.
原文链接:https://www.f2er.com/angularjs/142212.html所以
模板
<input #autoCompleteInput type="text" [matAutocomplete]="auto"/>
零件
@ViewChild('autoCompleteInput',{ read: MatAutocompleteTrigger }) autoComplete: MatAutocompleteTrigger;
这是展示这种方法的Plunker Example.