如何在Angular 2中将对象从一个组件传递到另一个组件？

我有Angular组件,第一个组件使用第二个组件作为指令.它们应该共享相同的模型对象,该对象在第一个组件中初始化.如何将该模型传递给第二个组件？

对于从父级到子级的单向数据绑定,请使用@Input装饰器(根据样式指南的建议)在子组件上指定输入属性

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

并在父模板中使用模板属性绑定

由于传递对象(JavaScript引用类型),因此对父组件或子组件中的对象属性所做的任何更改都将反映在另一个组件中,因为两个组件都引用了同一对象.我在Plunker中展示了这一点.

如果重新分配父组件中的对象

this.model = someNewModel;

Angular会将新对象引用传播到子组件(作为更改检测的一部分自动传播).

您不应该做的唯一事情是重新分配子组件中的对象.如果这样做,父级仍将引用原始对象.(如果确实需要双向数据绑定,请参阅/sf/ask/17360801/).

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

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

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

@Injectable()
export class StorageService {

    public scope: Array | boolean = false;

    constructor() {
    }

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

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