Hoe kan ik een object van de ene component naar de andere doorgeven in Angular 2?

Ik heb Hoekcomponentenen de eerste component gebruikt de tweede als een richtlijn.
Ze moeten hetzelfde model objectdelen, dat is geïnitialiseerd in de eerste component.
Hoe kan ik dat model doorgeven aan de tweede component?

Antwoord 1, autoriteit 100%

Voor gegevensbinding in één richting van ouder naar kind, gebruikt u de @input-decorator (als aanbevolendoor de stijlgids) om een ​​invoereigenschap op de onderliggende component op te geven

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

en gebruik sjablooneigenschap binding in de bovenliggende sjabloon

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

Aangezien u een object (een JavaScript-referentietype) doorgeeft, worden alle wijzigingen die u aanbrengt in objecteigenschappen in de bovenliggende of de onderliggende component doorgevoerd in de andere component, aangezien beide componenten een verwijzing naar hetzelfde object hebben. Ik laat dit zien in de Plunker.

Als u het object opnieuw toewijst in de bovenliggende component

this.model = someNewModel;

Angular verspreidt de nieuwe objectreferentie naar de onderliggende component (automatisch, als onderdeel van wijzigingsdetectie).

Het enige dat u niet moet doen, is het object opnieuw toewijzen in de onderliggende component. Als u dit doet, verwijst het bovenliggende object nog steeds naar het oorspronkelijke object. (Als u gegevensbinding in twee richtingen nodig hebt, raadpleegt u 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– Hoekige RC.2

Antwoord 2, autoriteit 34%

Component 2, de richtlijncomponent kan een invoereigenschap definiëren (@inputannotatie in Typescript). En Component 1 kan die eigenschap doorgeven aan de richtlijncomponent van de sjabloon.

Zie dit SO-antwoord Hoe de onderlinge communicatie tussen een master- en detailcomponent in Angular2 tot stand te brengen?

en hoe invoer wordt doorgegeven aan onderliggende componenten. In jouw geval is het directief.

Antwoord 3, autoriteit 23%

u kunt uw gegevens ook opslaan in een service met een setter en deze over een getter krijgen

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

Antwoord 4, autoriteit 4%

Van component

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

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