Как передать объект из одного компонента в другой в Angular 2?

Ответ 1

Компонент 2, компонент директивы может определить входное свойство (@input аннотация в Typescript). Компонент 1 может передать это свойство директивному компоненту из шаблона.

См. этот ответ SO Как взаимодействовать между основным и детальным компонентом в Angular2?

и как ввод данных дочерним компонентам. В вашем случае это директива.

Ответ 2

Для односторонней привязки данных от родителя к ребенку используйте декоратор @Input (как рекомендуется в руководстве по стилю), чтобы указать свойство ввода дочернего компонента

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

и использовать привязку свойства шаблона в родительском шаблоне

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

Поскольку вы передаете объект (ссылочный тип JavaScript), любые изменения, внесенные в свойства объекта родительского или дочернего компонента, будут отражаться в другом компоненте, поскольку оба компонента имеют ссылку на один и тот же объект. Я показываю это в Plunker.

Если вы переназначите объект в родительском компоненте

this.model = someNewModel;

Angular будет распространять ссылку на новый объект на дочерний компонент (автоматически, как часть обнаружения изменений).

Единственное, что вам не нужно делать, это переназначить объект в дочернем компоненте. Если вы это сделаете, родитель по-прежнему будет ссылаться на исходный объект. (Если вам нужна двусторонняя привязка данных, см. fooobar.com/questions/156906/...).

@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 - Angular RC.2

Ответ 3

вы также можете сохранить свои данные в службе с помощью сеттера и получить его через 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;
    }
}

Ответ 4

Использовать выходную аннотацию

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

Ответ 5

Из компонента

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

Ответ 6

Я знаю, что слишком поздно ответить, но для тех, кто ищет решение в angular 4, поскольку директивы были лишены:

Используйте sessionStorage, в angular, где вы хотите установить данные, напишите его как

sessionstorage.setItem( "ключ", "значение" ); если вы хотите сохранить свой объект, тогда напишите как sessionstorage.setItem( "ключ", JSON.stringify(obj));

тогда компонент, в котором вы хотите получить значение справа sessionStorage.getItem( "ключ" ) или для всего объекта JSON.parse(sessonStorage.getKey( "ключ" );