如何从另一个组件调用Angular2自定义多选组件的方法？

我正在开发一个带有「重置所有字段」按钮的NgForm，通过NgForm.reset()可以重置大部分字段，但有几个基于angular2-multiselect封装的自定义多选组件无法被该方法重置。

该自定义多选组件本质是附带<items>的<angular2-multiselect>，其自带的「X」按钮通过(onDeSelectAll)="onDeSelectAll($event)"可以正常清空选中值。

我尝试在同一NgForm内的另一个按钮触发该清空逻辑，也尝试自行编写方法：

<multiselect name="myMultiselect"/>
   <!-- 大量选项 -->

<button (click)="myMultiselect.onDeSelectAll($event)"/>
   <!-- 或 -->
<button (click)="ResetMultiSelect($event)"/>

我也尝试用TypeScript编写等效代码：

public myMultiselect : MultiSelect;

function ResetMultiSelect(items: any)
{
   myMultiselect.selectedItems = items;
   // 或
   this.myForm.myMultiselect.selectedItems = items;
}

我尝试将myMultiselect.selectedItems设置为null、undefined和[]（空数组），仅[]看似有效，但控制台提示"this.selectedItems.split is not a function"，虽达成预期结果但方式有误。

我的问题是：
A：能否通过按钮触发的函数设置multiselect的selectedItems以清空所有选项？
B：有没有合适的方法让按钮找到并调用multiselect组件的onDeSelectAll()方法？

针对问题B：调用组件自带的onDeSelectAll方法 #

要正确调用组件的onDeSelectAll方法，需通过@ViewChild获取组件实例，而非直接在模板中调用：

1. 在组件类中通过@ViewChild获取实例：

import { ViewChild, Component } from '@angular/core';
import { MultiSelect } from 'angular2-multiselect'; // 根据实际包路径调整

@Component({
  // 组件元数据
})
export class YourComponent {
  @ViewChild('myMultiselect') myMultiselect: MultiSelect;
  @ViewChild('myForm') myForm: NgForm;

  // 重置单个多选组件
  resetMultiSelect() {
    // 调用组件自带的清空方法，传入空数组匹配参数要求
    this.myMultiselect.onDeSelectAll([]);
  }

  // 重置整个表单+多选组件
  resetAllFields() {
    this.myForm.reset();
    this.resetMultiSelect();
  }
}

2. 模板中添加模板引用变量并绑定点击事件：

<form #myForm="ngForm">
  <multiselect #myMultiselect name="myMultiselect" [items]="yourItemsList"></multiselect>
  
  <button type="button" (click)="resetAllFields()">重置所有字段</button>
</form>

这种方式和组件自带「X」按钮的逻辑完全一致，不会触发异常。

针对问题A：通过设置selectedItems清空选项 #

如果要通过修改selectedItems实现清空，需解决组件内部的类型兼容问题：

1. 优先使用组件提供的官方更新方法（若存在）：

resetMultiSelect() {
  // 调用组件的setSelectedItems方法（部分版本的angular2-multiselect提供此方法）
  this.myMultiselect.setSelectedItems([]);
}

2. 若必须直接修改属性，需手动触发变更检测：

import { ChangeDetectorRef } from '@angular/core';

export class YourComponent {
  constructor(private cdr: ChangeDetectorRef) {}

  resetMultiSelect() {
    this.myMultiselect.selectedItems = [];
    // 手动触发变更检测，确保组件同步更新视图
    this.cdr.detectChanges();
  }
}

不过更推荐问题B的方案，直接调用组件自带方法能避免内部逻辑不兼容的问题。

内容的提问来源于stack exchange，提问作者Vlad