Angular2+重置组件库控件

Question

我已经创建了一个 angular 组件库，我正在通过 npm 安装到我的应用程序中。

我有一个下拉菜单，可以正常填充和使用...当我想 "reset" 组件库控件进行新选择时，问题就来了。
我不确定该怎么做？

这是我的下拉控件组件库html..

  <select [(ngModel)]='thisControl' name="nameControl" id="idControl" 
      (ngModelChange)="updateControl(thisControl)" class="form-control">
      <option *ngFor="let control of controls" [value]="control.ControlID"> 
      {{control.controlName}} ({{control.ControlCode}})</option>
  </select>

这是我的组件代码...

import { Component, OnInit, Output, EventEmitter, Input } from 
'@angular/core';
import { msControlDataService } from '../../services/ms-control-data- 
service';

@Component({
  selector: 'ms-control-name-id-code',
  templateUrl: './control-name-id-code.component.html',
  styleUrls: ['./control-name-id-code.component.scss']
})
export class ControlNameIdCodeComponent implements OnInit {
  agencies: any;
  constructor(private msControlDataService:msControlDataService) { }

  ngOnInit() {
    this.getAgencies();
  }
  @Input() currYear: any;
  @Output() selectedValue = new EventEmitter<object>();
  getAgencies(){
    this.msControlDataService.getControlListAD(this.currYear)
    .subscribe((data) => {
      this.agencies = data;

    });
  }
  updateControl(control){    
    this.selectedValue.emit(control);
  }
  thisControl:string = "";

}

这是我在应用中的用法...

我将模块导入 app.module.ts 并将我的标签添加到 html...

 <ms-control-name-id-code [(currYear)]="currYear"  
(selectedValue)="setControl($event)" ></ms-control-name-id-code>

就像我说的，这一切都按预期工作，但我似乎无法弄清楚如何 "reset" 控件而不进行整页刷新或获取控件的 ngModel。

非常感谢任何帮助！！

Answer 1

所以我最终做的是使用@ViewChild 来访问所有我的组件属性和功能...

@ViewChild(ControlNameIdCodeComponent)
private resetDropDown: ControlNameIdCodeComponent;

然后我可以改变绑定到 ngModel 的值

this.resetDropDown.thisControl = "";

Angular2+重置组件库控件

Angular 2 + reset component library control

angular

angular-components

angular-library