Angular 2 + 重置组件库控件答案

【问题标题】：Angular 2 + reset component library controlAngular 2 + 重置组件库控件
【发布时间】：2018-10-29 21:18:33
【问题描述】：

我创建了一个 Angular 组件库，我通过 npm 将其安装到我的应用程序中。

我有一个可以很好地填充和使用的下拉菜单...当我想“重置”组件库控件以进行新的选择时，问题就出现了。
我不知道该怎么做？

这是我用于下拉控件的组件库 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>

就像我说的那样，这一切都按预期工作，但是我似乎无法弄清楚如何在不刷新整个页面或获取控件的 ngModel 的情况下“重置”控件。

非常感谢任何帮助！

【问题讨论】：

我没有看到您正在重置值的任何代码。
那是因为我不知道该怎么做……问题是，“我如何重置组件库控件”……正在重置这个的值部分……如果是这样，我该怎么做？

标签： angular angular-components angular-library

【解决方案1】：

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

@ViewChild(ControlNameIdCodeComponent)
private resetDropDown: ControlNameIdCodeComponent;

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

this.resetDropDown.thisControl = "";

【讨论】：