Angular 中的子父母沟通最佳实践

我正在努力提高 Angular 的水平，并且想了解儿童与家长之间沟通的最佳实践。我当前想要使用的应用程序是 Angular 6。我知道我可以使用 @ViewChild、@Output 或创建服务在子父组件之间进行通信。还有其他方式进行沟通吗？如果不是，这三个中哪一个更好，为什么？

这是一个简单的例子：

子 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;
  }

显然这取决于你想做什么。

@Input

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

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

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

@Output

通过使用@Output您向上发出一个事件，因此当您想要向父级传达发生了某些事情时，此方法非常有用。数据交换是可能的，但这不是事情的重点。

重点是发生了一些事情，例如，在向导中，您可以有一些步骤，每个步骤都可以通知父组件该特定步骤已完成。父级不需要知道发生了什么，只要发生了就可以进入下一步。

@ViewChild

通过使用@ViewChild您正在将子组件引用到父组件中。

您通过混合逻辑来强制父组件让特定的子组件工作。

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

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

• 我们有3步
• 第三步完成并发出@Output给家长的事件
• 父级捕获事件并尝试保存数据
• 数据保存正常 => 父级告诉最后一步组件显示成功消息 或者
• 数据保存失败 => 父级告诉最后一步组件显示失败消息

Service

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

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

此外，通过这种方法，您可以将所有组件相互解耦。他们可以工作而不必担心别人的行为。

一般来说Subject用于服务通信。

你可以找到doc here

主题 VS @Output

Subject使用数据驱动的方法。@Output使用事件驱动的方法，或者更好的方法反应式编程方法

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

主题既是可观察值的来源，又是可观察的对象 本身。您可以像订阅任何 Observable 一样订阅主题。

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

与此同时，你可以有许多其他观察者正在观察Subject (Subject as Observable）通过订阅主题的事件。

当对象观测值发生变化时，所有对象的订阅者都会收到通知。

票务应用程序就是一个例子。一个用户加载负责显示空闲剩余位置的组件。他正在考虑选择哪个地方。与此同时，另一个用户买了票，所以他的位置现在不可用。第一个用户现在应该看到该位置不可用，因此您需要刷新数据，要求他们使用远程服务（可能使用轮询算法）。当检索新数据时，您将新数据传递到Subject.next(). Subject检测到观察到的值发生了变化，并通知他的所有订阅者该值发生了变化。明显地Subject将新数据传递给订阅者。