访问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。所以在你的父组件ts:

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();
}
}

Answer 2

父级和子级最常见的通信方式是通过共享服务，让父级在其providers数组中提供服务，然后将服务的同一实例依赖性注入所有子组件。

对于子组件，第二种方法是在其构造函数的依赖项列表中请求父组件的实例。

无论哪种方式，您都可以公开来自服务或父组件的方法和可观察对象，通常是可以订阅的行为主题

如果你不知道我所说的可观察性或行为主体是什么意思，那么你还没有准备好学习Angular。如果是这样的话，请暂停您的Angular之旅一两天，在您对RxJs的基本原理有了充分的理解后再回来，因为Angular在很大程度上是建立在RxJ之上的。去阅读受试者，行为受试者和RxJs运算符。