Angular中儿童父母沟通的最佳做法

Question

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

这是一个简单的例子：

子HTML

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

儿童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用于服务通信。

你可以在这里找到文档

主题VS @Output

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

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

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

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

同时，您可以有很多其他观察者通过订阅主题事件来观察 Subject（Subjectas Observable）。

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

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