Question

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

<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'
}

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

将id传递给changeValue函数，并向每个组件添加id属性（使用来自foreach的索引）。这可行，但是问题是我不希望组件a或b拥有id属性，这感觉像是一种解决方法，而不是解决方案。我尝试使用id属性代替id属性，但是在change value内部，我无法将id属性与组件相关联，因为@ViewChildren可以不会同时获得elementRef和componentRef。
将组件a和b组合到一个常规组件中，以删除该开关。问题是在某些情况下最好有单独的组件。

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

Answer 1

您可以为类型对象添加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

Answer 2

您可以使用[hidden]而不是ngSwitch，以便在未显示子组件事件时仍可以访问它，这将防止您无法定义。

    <app-a #comp [value]="'a'" [hidden]="type !== 'a'"></app-a>
    <app-b #comp [value]="'b'" [hidden]="type !== 'b'"></app-b>

您可以直接使用ViewChild在子组件上调用方法。

@ViewChild('componentA') a: ComponentA;
@ViewChild('componentb') b: Componentb;

然后根据您的条件定位一个您想要的对象，并在子对象上调用一个方法来更新该值。

if(a) {
a.updateValue(value)
}
else if(b) {
b.updateValue(value)
}

如何从外部元素访问各个组件？

2 个答案: