时间戳

首页 > 解决方案 > 如何从外部元素访问相应的组件？

angular - 如何从外部元素访问相应的组件？

问题描述

我有一个带有以下模板的组件：

<div (click)="changeValue(comp)" *ngFor="let type of types">
  <div [ngSwitch]="type">
    <app-a #comp [value]="'a'" *ngSwitchCase="'a'"></app-a>
    <app-b #comp [value]="'b'" *ngSwitchCase="'b'"></app-b>
  </div>
</div>

在里面changeValue我想访问相应的组件（在这里a或者b可能有更多）。例如：

changeComp(comp: any) {
  comp.value = 'new value'
}

我尝试了以下方法：（它们都有效，但我想要一个更好的解决方案）：

  1. 将一个传递id给changeValue函数id并向每个组件添加一个属性（使用来自 foreach 的索引）。这可行，但问题是我不想要组件a或b拥有id属性，这感觉像是一种解决方法而不是解决方案。id我尝试使用属性而不是id属性，但在内部change value我无法将id属性与组件相关联，因为@ViewChildren无法同时获取elementRef和componentRef。

  2. 合并组件a并b转换为通用组件以移除开关。问题是在某些情况下最好有单独的组件。

这是一个有效的堆栈闪电战： https ://stackblitz.com/edit/angular-hxc8nc

标签： angular

解决方案

您可以将 value 属性添加到您键入的对象并像下面的代码一样绑定它：

<div #parent (click)="changeValue(type.value)" *ngFor="let type of types">
  Click
  <div [ngSwitch]="type.t">
    <input #case_a [(ngModel)]="type.value" *ngSwitchCase="'a'" />
    <input #case_b [(ngModel)]="type.value" *ngSwitchCase="'b'" />
  </div>
</div>

这样 type.value 将始终具有来自任何可见子组件的值。在这里，我创建了一个有关其工作原理的示例： https ://stackblitz.com/edit/angular-bph8z3?file=src/app/app.component.ts

推荐阅读