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

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

저는 Angular 구성 요소를 가지고 있고 첫 번째 구성 요소는 두 번째 구성 요소를 지시로 사용합니다.첫 번째 구성 요소에서 초기화되는 동일한 모델 개체를 공유해야 합니다.어떻게 하면 그 모델을 두 번째 부품에 전달할 수 있습니까?

부모에서 자식으로 단방향 데이터 바인딩의 경우@Input하위 구성요소에 대한 입력 특성을 지정하는 장식자(스타일 안내서에서 권장하는 대로)

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

상위 템플릿에서 템플릿 속성 바인딩 사용

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

개체(JavaScript 참조 유형)를 전달하고 있으므로 두 구성 요소 모두 동일한 개체에 대한 참조를 가지고 있기 때문에 상위 구성 요소 또는 하위 구성 요소에서 개체 속성에 대한 변경 내용이 다른 구성 요소에 반영됩니다.플런커에서 보여줍니다.

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

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

구성 요소 2, 지시 구성 요소는 입력 속성을 정의할 수 있습니다(@input주석을 입력합니다.구성 요소 1은 템플릿에서 해당 속성을 지시 구성 요소로 전달할 수 있습니다.

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

입력이 하위 구성 요소로 전달되는 방법.당신의 경우 그것은 지시적입니다.

또한 세터가 있는 서비스에 데이터를 저장하고 보다 효율적으로 사용할 수 있습니다.

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;
    }
}

구성 요소로부터

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
            } );
    
    }    
    }

데이터 서비스

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
    }

}

출력 주석 사용

@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);

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