Angular中的儿童父母沟通最佳做法 [英] child parent communication best practices in Angular

问题描述

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

I'm trying to become better at Angular and I want to know the best practices between child-parent communication. My current app I want to work on is on Angular 6. I know I can communicate between child-parent components using @ViewChild, @Output or creating a service. Is there another way to do the communication? if not which one of those 3 is better and why?

这是一个简单的例子:

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

推荐答案

显然，这取决于您要执行的操作.

Obviously it depends on what you want to do.

@输入

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

By using @Input you are passing a parameter to a child component directly. Moreover you are coupling components by putting one inside the other. This approach is useful and simple.

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

It is a good approach when you want to ensure that a child component is integrated into a parent component that share a particular object and you don't have to care about synchronism mechanisms.

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

That means that if you change a property of the object, the object reference is still the same, so it is updated into parent and component. But if you change object reference (for example instantiating a new one or retrieving a new object by a remote service) in one component, the other one can't detect object change, so you will have a data misalignment.

@输出

通过使用@Output，您将向上发出事件，因此，当您想与父级进行交流时，此方法很有用.数据交换是可能的，但这不是事情的重点.

By using @Output you are emitting an event upwards, so this approach is useful when you want to communicate to the parent that something is happened. Data exchange is possible but it is not the focus of the thing.

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

The focus is that something is happened, for example in a wizard you could have some step and each step can advise parent component that that particular step is completed. Parent does not need to know what how is happened, but only that is happened so it can go to the next step.

@ViewChild

通过使用@ViewChild，您会将子组件引用引入父组件.

By using @ViewChild you are getting child component reference into parent component.

您正在通过混合其逻辑来迫使父级具有特定的子级组件.

You are forcing the parent to have a particular child component to work by mixing their logic.

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

This is useful when you want to call some method of the child component into the parent component.

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

Using the wizard example you can think about this situation:

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

• we have 3 step
• 3rd step completes and emits an @Output event to the parent
• parent catches the event and tries to save data
• data saving ok => parent tells last step component to show successful message or
• data saving fail => parent tells last step component to show fail message

服务

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

By using an external service you are centralizing data into one external object that is responsible to manage and update data.

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

This is a good approach for situations in which data can be retrieven from remote services or data object references can be reassigned.

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

Moreover by this approach you are decoupling all your components from each other. They can work without worry themselves about others' behaviours.

通常Subject用于服务通信.

您可以在此处找到文档

主题VS @Output

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

Subject uses a data driven approach. @Output uses an event driven approach, or better a Reactive Programming approach

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

So meanwhile @Output is the preferred way when you want to communicate that an event is happened, Subject is the preferred approach to communicate that data are changed.

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

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)，它可以检测到观察到的值变化并发出某种事件.

That means that you can use Subject to observe a particular variable or value (Subject as Observer), it detects observed value changes and emits a sort of event.

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

In the meanwhile you can have many other observer that are observing the Subject (Subject as Observable) by subscribing to subject's events.

当受试者观察值改变时，建议所有受试者的订户.

When subject observed value changes, all subject's subscribers are advised.

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

An example could be a ticketing application. One user loads the component responsible of showing free remaining places. He is thinking on which place to choose. In the meanwhile another user buy a ticket, so his place is now unavailable. First user now should see that place as unavailable, so you need to refresh data asking them to remote services (maybe with a polling alghoritm). When new data are retrieven you pass new data into Subject.next(). Subject detects that observed value is changed and advices all his subscribers that the value is changed. Obviously Subject pass new data to subscribers.

这篇关于Angular中的儿童父母沟通最佳做法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！