Question

我创建了一个角度组件库，该组件库将通过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的情况下“重置”控件。

非常感谢您的帮助！

Answer 1

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

@ViewChild(ControlNameIdCodeComponent)
private resetDropDown: ControlNameIdCodeComponent;

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

this.resetDropDown.thisControl = "";

Angular 2 +重置组件库控件

1 个答案: