angular - Angular中的 child parent 沟通最佳做法

Question

我想在Angular变得更好，我想知道 child 与 parent 之间的交流的最佳做法。我当前要使用的应用程序是在Angular 6上运行的。我知道我可以使用@ ViewChild，@ Output或创建服务在父级组件之间进行通信。还有其他沟通方式吗？如果不是，那三者中哪一个更好，为什么？

这是一个简单的例子:

child HTML

<button (click)="onLinkedClicked();">Click me</button>

child TS

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
.
.
.
export class showcaseMenuComponent implements OnInit {
    @Output() public linkedClicked = new EventEmitter<String>();

    constructor() {}

    onLinkedClicked() {
        console.log('on click child');
        this.linkedClicked.emit('collapsed');
    }
}

父HTML

<showcase-menu #topNavMenu 
               [showBranding]="false"
               [showSearch]= "false"  
               (linkedClicked)="linkToggler($event)">. 
</showcase-menu>

父TS

.
.
.
 navMenuState: string;
.
.
.
  linkToggler($event) {
    console.log("partent");
    this.navMenuState = $event;
  }

Answer 1

显然，这取决于您要做什么。

@输入

通过使用@Input，您可以将参数直接传递给子组件。
此外，您通过将一个组件放入另一个组件来耦合组件。
这种方法既有用又简单。

当您要确保子组件集成到共享特定对象的父组件中并且您不必关心同步机制时，这是一种很好的方法。

这意味着，如果更改对象的属性，则对象引用仍然相同，因此会将其更新为父对象和组件。但是，如果您在一个组件中更改对象引用(例如，实例化一个新对象或通过远程服务检索一个新对象)，则另一个组件将无法检测到对象更改，因此您将出现数据未对齐的情况。

@输出

通过使用@Output，您将向上发出一个事件，因此，当您想与父级进行通信时，此方法很有用。可以进行数据交换，但这并不是问题的重点。

重点是发生了某些事情，例如，在向导中您可以执行某些步骤，并且每个步骤都可以通知父组件该特定步骤已完成。家长不需要知道发生了什么，只需知道发生了什么，便可以继续进行下一步。

@ViewChild

通过使用@ViewChild，您可以将子组件引用引入父组件。

您正在通过混合父逻辑来强制父具有特定的子组件。

当您想将子组件的某些方法调用到父组件中时，这很有用。

使用向导示例，您可以考虑这种情况:

我们有3步

第三步完成，并向父

发出 @Output事件

父级捕获事件并尝试保存数据

数据保存正常=>父级告诉最后一步组件显示成功消息
或

数据保存失败=>父级告诉最后一步组件显示失败消息

服务

通过使用外部服务，您可以将数据集中到一个负责管理和更新数据的外部对象中。

对于可以从远程服务检索数据或可以重新分配数据对象引用的情况，这是一种很好的方法。

此外，通过这种方法，您可以将所有组件彼此分离。他们可以工作而不必担心他人的行为。

通常， Subject用于服务通信。

你可以找到 doc here

主题VS @Output
Subject使用数据驱动的方法。 @Output使用事件驱动的方法，或者更好的 Reactive Programming方法

因此，当您想要传达事件发生时， @Output是首选方式，而 Subject是传达数据已更改的首选方式。

A Subject is both a source of observable values and an Observable itself. You can subscribe to a Subject as you would any Observable.

这意味着您可以使用 Subject观察特定的变量或值( Subject称为 Observer)，它检测观察到的值变化并发出某种事件。

同时，您可以有许多其他观察者，通过订阅主体的事件来观察 Subject( Subject称为 Observable)。

当对象观察值发生变化时，建议所有对象的订户。

一个示例可以是票务应用程序。一位用户加载了负责显示可用剩余位置的组件。他正在考虑选择哪个地方。同时，另一个用户购买了一张票，因此他的位置现在不可用。现在，第一个用户应该看到该位置不可用，因此您需要刷新数据以要求他们访问远程服务(也许使用轮询算法)。当检索到新数据时，请将新数据传递到 Subject.next()中。 Subject检测到观察值已更改，并通知所有订户该值已更改。显然， Subject将新数据传递给订阅者。