角度2のクロスコンポーネント通信

Question

角度2/4では、コンポーネントAからコンポーネントBへデータを取得したいと思います。また、BからコンポーネントCにデータを送信する必要があり、コンポーネントCから結果を表示する必要があります。誰も簡単な例で私を導くことができますか？

Answer 1

コンポーネントから他のコンポーネントにデータを取得する方法は2つあります。

最初に、ComponentAに子ComponentBがあり、ComponentBにComponentCの子がある場合、HTMLを介してデータを渡します。以下のような何か：

ComponentA

@Component({ 
     selector: 'comp-a', 
     template: ` 
<!--[inputDataB]="somedata" passing data to componentB -->  
<!--[validateValue]="validateData" getting data from componetB and passing data to componentB -->  
     <comp-b [inputDataB]="somedata" [validateValue]="validateData"> </comp-b>` 
    }) 
    export class ComponentA implements OnInit { 
     title = 'app works!'; 

     somedata: any; 
     constructor(private service: MyService) {} 

     ngOnInit(): void { 
     this.service.getData() 
      .subscribe(data => this.somedata = data); 
     } 

     validateData = (num: number): boolean => { 
     return num >= 0; 
     } 
    } 

ComponentB：

@Component({ 
     selector: 'com-b', 
     template: `data of loaded in component A {{ inputDataB }} 
     <button (click)="processData(4)")> Do Something</button> 
     <span *ngIf="displayCompC"> <com-c [inputDataC]="dataC"></com-c></span>  
     ` 
    }) 
    export class ComponentB implements OnInit { 

     @Input() 
     inputDataB: any; 

     @Input() 
     validateValue: (value: number) => boolean; 
     dataC: number; 
     displayCompC: boolean; 
     constructor() {} 

     ngOnInit(): void { 
     this.displayCompC = false; 
     // on load you can modify or process data 
     this.dataC = this.inputDataB * 2; 
     } 

     processData = (num: number) => { 
     this.displayCompC = this.validateValue(num); 
     } 
    } 

ComonentC

@Component({ 
    selector: 'com-c', 
    template: `data of loaded in component B {{ inputDataC }} 
    {{inputDataC}} 
    ` 
}) 
export class ComponentC implements OnInit { 

    @Input() 
    inputDataC: number; 

    modifydata: number; 

    constructor() {} 

    ngOnInit(): void { 
    // on load you can modify or process data 
    this.modifydata = this.inputDataC * 5; 
    } 
} 

推測これはComponentAは、成分BとCのビューを持っているとして、あなたが望むものではありません

第2の方法は、各コンポーネントコンストラクタに注入するCommonDataModeを作成することです。 CommonDataModeは他のコンポーネントを介してデータを共有します。ような何か：

今

import {Component, OnInit} from '@angular/core'; 
    import {CommonDataModel} from './CommonDataMode'; 
    import {MyService} from './MyService'; 

    @Component({ 
     selector: 'app-root', 
     template: `{{anyData}}` 
    }) 
    export class AppComponent implements OnInit { 

     anydata: number; 
     constructor(private service: MyService, private commonDataModel: CommonDataModel) {} 

     ngOnInit(): void { 
     this.service.getData() 
      .subscribe(data => { 
      this.commonDataModel.data = data; 
      this.anydata = data; 
      }); 
     } 
    } 


@Component({ 
    selector: 'com-b', 
    template: `data B {{ inputDataB }} 
     double: {{doubleDate}} 
    ` 
}) 
export class ComponentB implements OnInit { 

    inputDataB: any; 
    doubleDate: number; 

    constructor(private commonDataModel: CommonDataModel) {} 

    ngOnInit(): void { 
    this.inputDataB = this.commonDataModel.data; 
    this.doubleDate = this.commonDataModel.multiplyByTwo(); 
    } 
} 


@Component({ 
    selector: 'com-c', 
    template: `data of loaded in component B {{ inputDataC }} 
    {{inputDataC}} 
    ` 
}) 

export class ComponentC implements OnInit { 

    inputDataC: number; 
    modifydata: number; 

    constructor(private commonDataModel: CommonDataModel) {} 

    ngOnInit(): void { 
    // on load you can modify or process data 
    this.modifydata = this.commonDataModel.data; 
    this.modifydata = this.commonDataModel.multiplyByNumber(5); 
    } 
} 

CommonDataMode

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

@Injectable() 
export class CommonDataModel { 

    data: number; 

    multiplyByTwo =(): number => { 
    return this.data * 2; 
    } 

    multiplyByNumber = (num: number): number => { 
    return this.data * num; 
    } 
} 

コンポーネントAが最初にロードする必要があるノード。コンポーネントBまたはCにあるときにページを更新すると、データは未定義ではありません。

この問題を回避するには、ルートモジュールにAPP_INITIALIZERを提供し、アプリケーションを起動する前にデータを読み込みます。