在Angular中共享数据的方式

12 月 ago

逸, 科

3 minutes

现在我正在学习Angular，为了在工作中使用。因为Angular有几种数据共享的方式，所以我打算发布这篇文章来整理我的理解。如果有错误，请指正。

在Angular中的数据共享方法

在Angular中，主要有以下方法来共享数据。

@Input,@Outputを使用した、親コンポーネントと子コンポーネント間でのデータ共有
URLパラメータ化
サービスの使用

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

在Angular中，当父组件和子组件需要共享数据时，可以使用@Input和@Output。以下是具体的使用示例。

将父组件的数据与子组件共享

在这里，我们设定父组件为top.component.ts，子组件为header.component.ts。

import { Component } from '@angular/core';

@Component({
  selector: 'app-top',
  templateUrl: './top.component.html',
  styleUrls: ['./top.component.css']
})
export class TopComponent {
  //子コンポーネントと共有したい変数
  sharedItem:string=""; 
}

<app-header [item]="sharedItem"></app-header>
<input type="text" [(ngModel)]="this.sharedItem">

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {
  //親コンポーネントから共有されるデータを受け取る
  @Input() item = '';
}

<p>
  Shared item: {{item}}
</p>

在父组件中定义要与子组件共享的变量。然后，在父HTML中如下定义。

<selector名 [子コンポーネントで受け取る名]="親コンポーネントで定義した変数名"><</selector名>

如果我们定义这样的话，可以在父母和孩子之间共享数据。这次我们设置了用户输入内容显示在sharedItem中。

将子组件的数据与父组件共享

下面将总结一种与之前相反的方法，即将子组件的数据共享给父组件。

<label for="item-input">Add an item:</label>
<input type="text" id="item-input" #newItem>
<button type="button" (click)="addNewItem(newItem.value)">Add to parent's list</button>

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {
  @Output() newItemEvent = new EventEmitter<string>();

  addNewItem(value: string) {
    this.newItemEvent.emit(value);
  }
}

在子组件中，我们可以使用@Output来通知父组件事件。在这种情况下，我们可以使用自定义事件定义和EventEmitter。以下文章对EventEmitter进行了简明扼要的总结，非常易懂。

点击按钮后，将用户的输入值通知给父组件。
接下来，我们来总结一下父组件的情况。

import { Component } from '@angular/core';

@Component({
  selector: 'app-top',
  templateUrl: './top.component.html',
  styleUrls: ['./top.component.css']
})
export class TopComponent {
  items = ['item1', 'item2', 'item3', 'item4'];

  addItem(newItem: string) {
    this.items.push(newItem);
  }
}

亲组件将接收到的输入值接收。

<app-header (newItemEvent)="addItem($event)"></app-header>
<ul>
  <li *ngFor="let item of items">{{item}}</li>
</ul>

<selector名 (子コンポーネントで定義したイベント名)="親コンポーネントで定義したメソッド"></selector名>

通过这种方式将子组件的数据传递给父组件。

在URL的参数中共享

如果希望在从画面A转移到下一个画面B时将画面A中的输入内容等带到画面B，可以将要共享的信息作为URL参数传递。
以下的文章中有很好的总结解释。

使用服务

如果在家庭成员之间共享数据，可以使用@Input和@Output，但这些数据会在组件初始化时进行初始化。由于服务是单例的，除非重新启动或停止应用程序，否则数据不会被初始化。同时，也可以集中管理数据。在涉及页面跳转的情况下（组件会被初始化，无法使用@Input和@Output），我使用服务来共享数据。

在这里，我们使用share.service.ts来在service1.component.ts和service2.component.ts之间共享数据。

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ShareService {
  message:string;

  constructor() { }

  getMessage(){
    return this.message;

  }

  setMessage(message:string){
    this.message=message;
  }

}

接下来展示service1.component.ts和service2.component.ts。

import { ShareService } from './../../../service/share.service';
import { Component } from '@angular/core';

@Component({
  selector: 'app-service1',
  templateUrl: './service1.component.html',
  styleUrls: ['./service1.component.css']
})
export class Service1Component {
  message:string;
  constructor(private shareService:ShareService){}

  setMessage(){
    this.shareService.setMessage(this.message);
  }

}

<p>共有したい言葉を入れてください</p>
  <input type="text" name="message" [(ngModel)]="message">
  <button (click)="setMessage()">共有</button>
  <div *ngIf="message">{{message}}がサービスにセットされました</div>
<app-service2></app-service2>

在service1组件中，当用户点击”共享”按钮时，会通过setMessage方法将用户输入的文字设置到share.service.ts文件中的message变量中。

接下来，我会展示service2组件。

import { Component } from '@angular/core';
import { ShareService } from 'src/service/share.service';

@Component({
  selector: 'app-service2',
  templateUrl: './service2.component.html',
  styleUrls: ['./service2.component.css']
})
export class Service2Component {
  message:string;
  constructor(private shareService:ShareService){}
  
  getMessage(){
    this.message=this.shareService.getMessage();
  }
}

<p>共有した言葉を表示する</p>
<button (click)="getMessage()">表示</button>
<div *ngIf="message">{{message}}がサービスにセットされています</div>

点击”表示”按钮时，通过getMessage方法，在share.service.ts中显示用户输入的消息。

通过使用这种服务，您可以在不同的组件之间共享数据。由于服务在应用程序重新启动或停止之前会一直保持数据，因此需要注意不小心设置了意外数据的情况。（在另一个处理中无意间浪费了时间，没有意识到服务中共享的值存在。。。）