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

Answer 2

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

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

您可以通过两种方法从服务或父组件和可观察对象公开方法，通常是可以预订的行为主题。

如果您不了解可观察性或行为主题的意思，那么您还不准备学习Angular。如果这样的话，您可以暂停一两天的Angular旅程，并在您对RxJ的基础知识有了充分的了解之后再回来，因为Angular很大程度上建立在RxJ的基础上。继续阅读主题，行为主题和RxJs运算符。

接触角儿童

2 个答案: