Angular 2에서 한 구성 요소에서 다른 구성 요소로 객체를 전달하는 방법은 무엇입니까?

Angular 2에서 한 구성 요소에서 다른 구성 요소로 객체를 전달하는 방법은 무엇입니까?

---

I는이 각도 성분 및 제 성분으로서 사용하는 두번째 지시자 . 첫 번째 구성 요소에서 초기화 된 동일한 모델 객체를 공유해야합니다 . 해당 모델을 두 번째 구성 요소에 어떻게 전달할 수 있습니까?

---

컴포넌트 2, 지시어 컴포넌트는 입력 속성 ( @inputTypescript의 주석)을 정의 할 수 있습니다 . 그리고 컴포넌트 1은 그 속성을 템플릿에서 디렉티브 컴포넌트로 전달할 수 있습니다.

이 답변을 참조하십시오 Angular2에서 마스터와 세부 구성 요소 간의 상호 통신을 수행하는 방법은 무엇입니까?

입력이 자식 구성 요소에 전달되는 방법. 귀하의 경우에는 지시입니다.

---

부모에서 자식으로의 단방향 데이터 바인딩의 경우 @Input데코레이터 ( 스타일 가이드에서 권장 하는 대로 )를 사용하여 자식 구성 요소에 대한 입력 속성을 지정합니다.

@Input() model: any;   // instead of any, specify your type

부모 템플릿에서 템플릿 속성 바인딩을 사용합니다.

<child [model]="parentModel"></child>

객체 (JavaScript 참조 유형)를 전달하기 때문에 부모 또는 자식 구성 요소의 객체 속성에 대한 변경 사항은 두 구성 요소가 동일한 객체에 대한 참조를 가지므로 다른 구성 요소에 반영됩니다. 나는 이것을 Plunker 에서 보여줍니다 .

상위 구성 요소에서 개체를 재 할당하는 경우

this.model = someNewModel;

Angular는 새 개체 참조를 자식 구성 요소에 전파합니다 (변경 감지의 일부로 자동으로).

하지 말아야 할 유일한 일은 자식 구성 요소의 개체를 다시 할당하는 것입니다. 이렇게하면 부모는 여전히 원래 개체를 참조합니다. (양방향 데이터 바인딩이 필요한 경우 https://stackoverflow.com/a/34616530/215945 참조 ).

@Component({
  selector: 'child',
  template: `<h3>child</h3> 
    <div>{{model.prop1}}</div>
    <button (click)="updateModel()">update model</button>`
})
class Child {
  @Input() model: any;   // instead of any, specify your type
  updateModel() {
    this.model.prop1 += ' child';
  }
}

@Component({
  selector: 'my-app',
  directives: [Child],
  template: `
    <h3>Parent</h3>
    <div>{{parentModel.prop1}}</div>
    <button (click)="updateModel()">update model</button>
    <child [model]="parentModel"></child>`
})
export class AppComponent {
  parentModel = { prop1: '1st prop', prop2: '2nd prop' };
  constructor() {}
  updateModel() { this.parentModel.prop1 += ' parent'; }
}

Plunker -각도 RC.2

---

setter를 사용하여 서비스에 데이터를 저장하고 getter를 통해 가져올 수도 있습니다.

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

@Injectable()
export class StorageService {

    public scope: Array<any> | boolean = false;

    constructor() {
    }

    public getScope(): Array<any> | boolean {
        return this.scope;
    }

    public setScope(scope: any): void {
        this.scope = scope;
    }
}

---

출력 주석 사용

@Directive({
  selector: 'interval-dir',
})
class IntervalDir {
  @Output() everySecond = new EventEmitter();
  @Output('everyFiveSeconds') five5Secs = new EventEmitter();
  constructor() {
    setInterval(() => this.everySecond.emit("event"), 1000);
    setInterval(() => this.five5Secs.emit("event"), 5000);
  }
}
@Component({
  selector: 'app',
  template: `
    <interval-dir (everySecond)="everySecond()" (everyFiveSeconds)="everyFiveSeconds()">
    </interval-dir>
  `,
  directives: [IntervalDir]
})
class App {
  everySecond() { console.log('second'); }
  everyFiveSeconds() { console.log('five seconds'); }
}
bootstrap(App);

---

구성 요소에서

import { Component, OnInit, ViewChild} from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { dataService } from "src/app/service/data.service";
    @Component( {
        selector: 'app-sideWidget',
        templateUrl: './sideWidget.html',
        styleUrls: ['./linked-widget.component.css']
    } )
    export class sideWidget{
    TableColumnNames: object[];
    SelectedtableName: string = "patient";
    constructor( private LWTableColumnNames: dataService ) { 
       
    }
    
    ngOnInit() {
        this.http.post( 'getColumns', this.SelectedtableName )
            .subscribe(
            ( data: object[] ) => {
                this.TableColumnNames = data;
     this.LWTableColumnNames.refLWTableColumnNames = this.TableColumnNames; //this line of code will pass the value through data service
            } );
    
    }    
    }

DataService

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable()
export class dataService {
    refLWTableColumnNames: object;//creating an object for the data
}

구성 요소로

import { Component, OnInit } from '@angular/core';
import { dataService } from "src/app/service/data.service";

@Component( {
    selector: 'app-linked-widget',
    templateUrl: './linked-widget.component.html',
    styleUrls: ['./linked-widget.component.css']
} )
export class LinkedWidgetComponent implements OnInit {

    constructor(private LWTableColumnNames: dataService) { }

    ngOnInit() {
    console.log(this.LWTableColumnNames.refLWTableColumnNames);
    }
    createTable(){
        console.log(this.LWTableColumnNames.refLWTableColumnNames);// calling the object from another component
    }

}

참조 URL : https://stackoverflow.com/questions/34088209/how-to-pass-object-from-one-component-to-another-in-angular-2