在 Angular 2 中的元件之間傳遞資料

Muhammad Adil 2023年1月30日 2022年4月20日
  1. 在 Angular 2 中使用輸入裝飾器將資料從父元件傳遞到子元件
  2. 在 Angular 2 中使用輸出和 EventEmitter 將資料從子元件傳遞到父元件
  3. 在 Angular 2 中使用服務在元件之間傳遞資料
在 Angular 2 中的元件之間傳遞資料

本文將向你展示如何在 Angular 2 中的兩個元件之間傳遞資料。

在 Angular 2 中使用輸入裝飾器將資料從父元件傳遞到子元件

當父元件需要與其子元件通訊時,使用通過 Input() 裝飾器的父子元件。父元件傳送資料或對子元件執行操作。

它通過使用 @Input() 裝飾器通過模板提供資料來工作。這用於修改和跟蹤元件的輸入設定。

以下程式碼示例將演示如何使用 Angular 2 中的輸入裝飾器在兩個元件之間建立這種型別的關係。

TypeScript 程式碼(App.component.ts):

import { Component } from '@angular/core';
import { Demo } from './Demo';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    DemoEx:Demo[] = [
        new Demo('First Example'),
        new Demo('SECOND Example')
    ];
}

TypeScript 程式碼(input.component.ts):

import { Component, OnInit, Input} from '@angular/core';
import { Demo } from '../Demo';
@Component({
    selector: 'app-demo',
    templateUrl: './input.component.html',
    styleUrls: ['./input.component.css']
})
export class inputCom implements OnInit {
    @Input() Demo: Demo;
    constructor() { }
    ngOnInit() {
    }
}

HTML 程式碼(app.component.htmlinput.component.html):

<main>
<section>
    <div class="card">
        <header>{{Demo.name}}</header>  
    </div>
</section>
</main>
<h3>Parent to child Component Interaction in Angular</h3>
<app-demo *ngFor="let Demo of DemoEx" [Demo]="Demo"></app-demo>

點選這裡檢視上面程式碼的演示。

在 Angular 2 中使用輸出和 EventEmitter 將資料從子元件傳遞到父元件

EventEmitter 是一個可以發出自定義事件的類。它是一個 Angular 2 元件,使你能夠在 Angular 2 應用程式中使用可觀察模式。

該元件提供了傳統回撥模式的替代方案,並通過在不再需要 observable 時取消訂閱來簡化觸發更改檢測的過程。

以下示例顯示了父元件如何訂閱事件並相應地更改其行為。

TypeScript 程式碼(parent.component.ts):

import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
    selector: 'parent',
    template: '<button (click)="DemoEx()">Click here to go to the next component</button>',
})
export class ParentComponent  {
    @Input() name: string;
    @Output() SampleEx = new EventEmitter<string>();
    DemoEx() {
        this.SampleEx.emit(this.message)
    }
    message: string = "You are in Child Component";
}

TypeScript 程式碼(app.component.ts):

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    name = 'Angular';
    message:string='';
    NextCom($event) {
        this.message = $event;
    }
}

HTML 程式碼(app.component.html):

<parent name="{{ name }}" (SampleEx)="NextCom($event)"></parent>
<br/>
<br/>
{{message}}

點選這裡檢視上面示例的演示。

在 Angular 2 中使用服務在元件之間傳遞資料

服務是實現 Injectable 介面的類。它必須具有使用 Injectable Decorator 註釋的方法,並在需要時實現一個或多個介面。

在沒有直接連結的元件之間傳輸資料時,應該使用共享服務。當資料需要一直保持同步時,RxJS 的 BehaviorSubject 就派上用場了。

我們可以將名稱設定為可使用 BehaviorSubject 使用 the.next() 方法修改的可觀察物件。然後我們可以使用 getValue() 函式提取最後一個值作為原始資料。

當前值儲存在 BehaviorSubject 中。因此,元件將始終讀取 BehaviorSubject 中的最新資料值。

請參見下面的示例。

TypeScript 程式碼(first.component.ts):

import { Component, OnInit } from '@angular/core';
import { SharedService } from '../demo.service';
@Component({
    selector: 'app-demo1',
    templateUrl: './first.component.html',
    styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {
    sharedData: string;
data: any;
    constructor(private sharedService: SharedService) { }
    ngOnInit() {
        this.sharedService.sharedData$
        .subscribe(sharedData => this.sharedData = sharedData);
    }
    updateData() {
        this.sharedService.setData(this.data);
    }
}

TypeScript 程式碼(second.component.ts):

import { Component, OnInit } from '@angular/core';
import { SharedService } from '../demo.service';
@Component({
    selector: 'app-demo',
    templateUrl: './second.component.html',
    styleUrls: ['./second.component.css']
})
export class SecondComponent implements OnInit {
    sharedData: string;
data: any;
    constructor(private sharedService: SharedService) { }
    ngOnInit() {
        this.sharedService.sharedData$
        .subscribe(sharedData => this.sharedData = sharedData);
    }
    updateData() {
        this.sharedService.setData(this.data);
    }
}

HTML 程式碼:

<h3>2nd Component</h3>
<input type="text" [(ngModel)]="data">
<button (click)="updateData()">Save</button>
<br>
<br>
Saved Data {{ sharedData }}
<h1>Example of Unrelated Components: Sharing Data with a Service</h1>
<h3>1st Component</h3>
<input type="text" [(ngModel)]="data">
<button (click)="updateData()">Save</button>
<br>
<br>
SavedData {{ sharedData }}

在元件之間傳遞資料的好處是,你可以通過將專案分解為更小的部分來更好地理解你的專案,從而讓你能夠集中精力,而不會被數百行程式碼行所累。

如果每個開發人員都在單獨的元件上工作,團隊也可以更有效率地運作。

點選這裡檢視上面示例的演示。

Muhammad Adil avatar Muhammad Adil avatar

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook

相關文章 - Angular Component