Làm thế nào để giao tiếp giữa các thành phần trong Angular?

Question

Tôi đang làm việc trên một dự án ứng dụng web và tôi đang cố gắng sử dụng Góc, tôi gặp một số vấn đề với giao tiếp thành phần. Ví dụ, làm thế nào một thành phần cha mẹ trao đổi dữ liệu với thành phần con, làm thế nào để giao tiếp giữa các thành phần anh chị em.

Answer 1

Bạn sẽ cần sử dụng tính năng tiêm phụ thuộc. Dưới đây là một ví dụ nhỏ: https://github.com/gdi2290/angular2do/blob/gh-pages/app/components/todo-item/todo-item.js

Answer 2

1. @Input và @Output

   Nếu có thành phần nhiều phần dữ liệu bạn có thể sử dụng @Input và @Output để trao đổi dữ liệu. Document: https://angular.io/guide/component-interaction

   dụ: https://angular.io/generated/live-examples/component-interaction/eplnkr.html

2. Dependency Injection

   bạn có thể lưu trữ dữ liệu trong dịch vụ, và sau đó tiêm dịch vụ vào các thành phần mà bạn muốn. chẳng hạn như "user.server.ts" trong ví dụ:

   https://angular.io/generated/live-examples/dependency-injection/eplnkr.html

Answer 3

Nếu bạn đang cố gắng để giao tiếp từ một bộ phận phụ huynh để một thành phần con, điều này được mô tả khá rõ ràng sử dụng @Input và EventEmitters với @Output trong tài liệu góc.

Angular 2 component interaction

Đối với thông tin liên lạc trên anh chị em, tôi đã đăng một câu trả lời trong một câu hỏi tương tự mà có thể giúp đỡ với vấn đề chia sẻ dữ liệu giữa các thành phần anh chị em. Hiện tại, tôi nghĩ phương pháp dịch vụ được chia sẻ là hiệu quả nhất.

angular-2-sibling-component-communication

Answer 4

Sử dụng dịch vụ:

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

@Injectable() 
export class AppState { 
    public _subject = new Subject<object>(); 
    public event = this._subject.asObservable(); 

    public publish(data: any) { 
    this._subject.next(data); 
    } 
} 

và bạn có thể xuất bản thông điệp sự kiện như thế này:

export class AppComponent { 
    constructor(
    public appState: AppState 
) { 
    appState.publish({data: 'some data'}); 
    } 
} 

và bạn có thể đăng ký những sự kiện này:

export class HomeComponent { 
    constructor(
    public appState: AppState 
) { 
    appState.event.subscribe((data) => { 
     console.log(data); // {data: 'some data'} 
    }); 
    } 
} 

Answer 5

Có Sự kiện API ở góc có thể làm điều đó cho bạn.

Click here for more details on Events.

Dưới đây là ví dụ nhanh tôi hiện đang sử dụng trong dự án của mình. Hy vọng nó sẽ giúp ai đó có nhu cầu.

nhập {Events} từ 'ionic-angular';

Cách sử dụng:

constructor(public events: Events) { 
     /*========================================================= 
     = Keep this block in any component you want to receive event response to   = 
     ==========================================================*/ 
     // Event Handlers 
     events.subscribe('menu:opened',() => { 
      // your action here 
      console.log('menu:opened'); 
     }); 
     events.subscribe('menu:closed',() => { 
      // your action here 
      console.log('menu:closed'); 
     }); 
    } 

    /*===================================================== 
    = Call these on respective events - I used them for Menu open/Close   = 
    ======================================================*/ 

    menuClosed() { 
     // Event Invoke 
     this.events.publish('menu:closed', ''); 
    } 
    menuOpened() { 
     // Event Invoke 
     this.events.publish('menu:opened', ''); 
    } 

    }