[angular] Angular 2의 구성 요소간에 데이터를 어떻게 공유합니까?

여러 가지 방법이 있습니다. 이것은 부모와 자식 요소 사이의 전파를 사용하는 예입니다. 이것은 매우 효율적입니다.

두 가지 양식 내에서 두 가지 방법으로 데이터 바인딩의 사용법을 볼 수있는 예제를 제출했습니다. 누군가가 plunkr 샘플을 제공 할 수 있다면 이것은 매우 좋을 것입니다 😉

서비스 제공자를 사용하여 다른 방법을 찾을 수 있습니다. 참고로이 비디오를 볼 수도 있습니다. ( Angular의 구성 요소 간 데이터 공유 )

mymodel.ts (공유 할 데이터)

// Some data we want to share against multiple components ...
export class mymodel {
    public data1: number;
    public data2: number;
    constructor(
    ) {
        this.data1 = 8;
        this.data2 = 45;
    }
}

알아두기 : “mymodel”을 하위 구성 요소와 공유 할 상위가 있어야합니다.

부모 구성 요소

import { Component, OnInit } from '@angular/core';
import { mymodel } from './mymodel';
@Component({
    selector: 'app-view',
    template: '<!-- [model]="model" indicates you share model to the child component -->
        <app-mychild [model]="model" >
        </app-mychild>'

        <!-- I add another form component in my view,
         you will see two ways databinding is working :-) -->
        <app-mychild [model]="model" >
        </app-mychild>',
})

export class MainComponent implements OnInit {
    public model: mymodel;
    constructor() {
        this.model = new mymodel();
    }
    ngOnInit() {
    }
}

하위 구성 요소, mychild.component.ts

import { Component, OnInit,Input } from '@angular/core';
import { FormsModule }   from '@angular/forms'; // <-- NgModel lives here
import { mymodel } from './mymodel';

@Component({
    selector: 'app-mychild',
    template: '
        <form #myForm="ngForm">
            <label>data1</label>
            <input type="number"  class="form-control" required id="data1 [(ngModel)]="model.data1" name="data1">
            <label>val {{model.data1}}</label>

            label>data2</label>
            <input  id="data2"  class="form-control" required [(ngModel)]="model.data2" name="data2" #data2="ngModel">
            <div [hidden]="data2.valid || data2.pristine"
                class="alert alert-danger">
                data2 is required
            </div>

            <label>val2 {{model.data2}}</label>
        </form>
    ',
})

export class MychildComponent implements OnInit {
    @Input() model: mymodel ;  // Here keywork @Input() is very important it indicates that model is an input for child component
    constructor() {
    }
    ngOnInit() {
    }
}

참고 : 드물게 페이지 초기화시 모델을 사용할 “준비”상태가 아니기 때문에 HTML 코드를 구문 분석 할 때 오류가 발생할 수 있습니다. 이 경우 HTML 코드 앞에 ngIf 조건을 붙입니다.

<div *ngIf="model"> {{model.data1}} </div>