在Angular 9中的组件之间共享数据

在本教程中，我们将看到如何在Angular 9中的各组件之间共享数据。在各角度组件之间进行通信的方式不同，但是4个主要属性是：

• @输入 –用于父母与孩子之间的沟通。
• @ViewChild –用于父母与孩子之间的沟通。
• @输出 –使用 事件发射器 .
• service –对于不在父子结构中的任何组件。

在父子之间共享组件之间的数据

首先，我们将了解如何使用2个不同的属性来实现父子组件之间的通信。

Using @输入 () Decorator

考虑父组件具有一些需要发送到子组件的数据。

export class ParentComponent {
  public parentValue: string = 'This Data is Coming From Parent To Child - via  @输入 ()';
}

we can accept the data of parent component inside the child component by using @输入 ()property inside the child component.

import { Component, OnInit, Input } from '@angular/core';
...
export class ChildComponent {
   @输入 () public parentValue: string;
}

从父模板，我们可以传递数据或类似的值。

<app-child [parentValue]='parentValue'></app-child>

Using @ViewChild () Decorator

Another workaround for sharing data to child component from a parent component is we can do with a @ViewChild .
考虑子组件是否具有已声明的子组件，并且仅在子组件本身内部使用。我们可以使用模板引用从父组件访问该属性。

export class ChildComponent {
  public application: string;
}

从父组件模板，我们可以创建模板参考

<app-child #child ></app-child>

And With the @ViewChild template reference, we can access the child component properties.

import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from '../child/child.component';

export class ParentComponent {
   @ViewChild ('child') public child: ChildComponent;
  /*
   * Sets the value of the child component.
   */
  public setChildProperty(): void {
    this.child.application = 'This Data is Coming From Parent To Child - via  @ViewChild ()';
  }
}

从子级到父级在组件之间共享数据

For sharing data from child to parent component we have to use two properties i.e. @输出 decorator and 事件发射器 () of angular

Send Event With @输出 () Decorator

So from child component we can emit data to the parent component using 事件发射器 ().

import { Component,  事件发射器 , Output } from '@angular/core';
export class ChildComponent {
   @输出 () public afterClick:  事件发射器 <string> = new  事件发射器 ();

  /*
   * something to be sent to parent component after some event.
   */
  public onSubmit(): void {
    this.afterClick.emit('This Data is Coming From Child To Parent - via  @输出 ()');
  }
}

捕获事件

我们可以在模板内部的父组件中捕获发出的事件，如下例所示：

<!-- Assign value directly to variable -->
<app-child (afterClick)='alertmsg = $event'></app-child>

<!--  OR  -->

<!-- Create method to use the value -->
<app-child (afterClick)='showAlert($event)'></app-child>

使用服务在任何组件之间共享数据

为了通过服务共享数据，将创建一个消息服务，其中我们将定义两种方法来更新价值和获取价值。

服务

在此示例中，我们将使用主题创建共享服务。主题本身是可观察的，但与众不同的是它们也是观察者。这意味着除了具有订阅能力之外，主题还可以发出数据。

import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';
@Injectable()
export class MessageService {
  private siblingMsg = new Subject<string>();
  constructor() { }
  /*
   * @return {Observable<string>} : siblingMsg
   */
  public getMessage(): Observable<string> {
    return this.siblingMsg.asObservable();
  }
  /*
   * @param {string} message : siblingMsg
   */
  public updateMessage(message: string): void {
    this.siblingMsg.next(message);
  }
}

订阅共享数据

To read / display data we have to subscribe that message service getMessage() method so from where ever data is updated it will reflect on component everywhere it is subscribed.

import { Component, OnInit, OnDestroy } from '@angular/core';
import { MessageService } from './message.service';
...
export class AppComponent implements OnInit{
  public messageForSibling: string;
  public subscription: Subscription;
  constructor(
    private msgservice: MessageService // inject service
  ) {}

  public ngOnDestroy(): void {
    this.subscription.unsubscribe(); // onDestroy cancels the subscribe request
  }

  public ngOnInit(): void {
    // set subscribe to message service
    this.subscription = this.messageService.getMessage().subscribe(msg => this.messageForSibling = msg);
  }
}

更新共享数据

Update the shared message from anywhere of the component using the service method which is updateMessage().

import { MessageService } from './message.service';
...
export class ChildComponent {

  constructor(
    private msgservice: MessageService // inject service
  ) {}

  public sendToSibling(): void {
    this.msgService.updateMessage('This Data is Coming From Child to Sibling - via service');
  }
}

更新数据后，它将自动反映数据的订阅位置。

演示版