javascript - 在 Angular 中访问子项

Question

我们想用 Angular 编写一个小选项卡组件。

我写了一个这样的组件:

<portal-flex-grid-tab-bar>
  <portal-flex-grid-tab TabName="Apotheke" TabIdentifier="Apotheke"  TabSelected="true" (TabClicked)="OnTabClick(0)"></portal-flex-grid-tab>
  <portal-flex-grid-tab TabName="Bundesland" TabIdentifier="Bundesland"  (TabClicked)="OnTabClick(1)"></portal-flex-grid-tab>
  <portal-flex-grid-tab TabName="ARZ Einzugsgebiet" TabIdentifier="ARZ"  (TabClicked)="OnTabClick(2)"></portal-flex-grid-tab>
</portal-flex-grid-tab-bar>

我们希望提供选项卡栏和单击事件，该事件返回单击选项卡的标识符。如果单击(选择)一个选项卡，我们要取消选择其他选项卡。

为了实现这个目标，我们需要一种让父组件与子组件对话的方法，反之，我们需要选项卡将事件发送到选项卡栏。我们怎样才能实现这个目标呢？我们很高兴收到任何想法，因为我们是 Angular 的初学者。

Answer 1

通常，您不应该与子组件“交谈”，但如果必须，请使用 @ContentChild 指令 - https://angular.io/api/core/ContentChild

在您的情况下，您可以控制父组件中的子组件选择，例如带有属性selectedTab。所以在你的父组件中:

public selectedTab: 0;
public onTabSelected(value: number): void {
    this.selectedTab = value;
}

在 html 的父组件中:

<section>
    <app-child-tab isSelected="selectedTab === 0" (tabClicked)="onTabSelected(0)">
    </app-child-tab>
    <app-child-tab isSelected="selectedTab === 1" (tabClicked)="onTabSelected(1)">
    </app-child-tab>
</section>

在您的子组件中，您必须添加 EventEmitter:

export class ChildComponent {
    @Output() tabClicked: EventEmitter<void> = new EventEmitter();

    public click(): void {
        this.tabClicked.emit();
    }
}