Angular 子事件定位错误的父组件

Question

我有一些嵌套的 angular 组件给我一些事件发射器的问题。结构是这样的：

<parent>
    <child-table id="table1">

    </child-table>
    <child-table id="table2">

    </child-table>
</parent>

现在 child-table 组件看起来像这样：

<toolbar (thingChanged)="onThingChanged($event)">
</toolbar>

所有 onThingChanged() 所做的是：

@Output() thingChanged: EventEmitter<boolean> = new EventEmitter<boolean>(); //at global level
@Input() thingValue: boolean; //also global

onThingChanged(changed: boolean)
    {
        this.thingChanged.emit(changed);
        this.populateTable();
    }

和工具栏的 html 看起来像这样：

<mat-slide-toggle id="thingValue"
        [(ngModel)]='thingValue' (ngModelChange)='onThingChanged($event)'>
</mat-slide-toggle>

我在这个应用程序运行时看到的是两个 tables，两个都带有 mat-slide 切换。但是，出于某种原因，如果我单击右侧 table 的切换按钮（在本例中为 id=table2 的切换按钮），它总是会更改 [=34] 的滑块切换=]左边，table1.

我期望的行为是，当我单击 table2 的切换按钮时，我看到 table2 调用它自己的 populateTable() 方法，而不是 table1 的方法。

如果有人对发生这种情况的原因有任何建议，我将不胜感激。

编辑：这是重现问题的 stackblitz。 https://stackblitz.com/edit/angular-ivy-mhiihu?file=src%2Fapp%2Fapp.component.html

Answer 1

这是一个猜测，但如果您在切换组件上有完全相同的 id 可能会影响它，例如<mat-slide-toggle id="thingValue"

也许使这个 id 动态化

Angular 子事件定位错误的父组件

Angular child event targets wrong parent component

javascript

angular

typescript

angular-material

eventemitter