Angular2 在组件之间共享数据答案

【问题标题】：Angular2 Share data between componentsAngular2 在组件之间共享数据
【发布时间】：2017-10-25 19:48:11
【问题描述】：

您好，我想在组件之间共享标题。我有组件 app.component 声明标题属性，所有其他组件都是子组件。我有 page-header.component 将标题写入 html 和 dashboard.component 设置标题属性和标题不显示。这是我的代码：

app.component

export class AppComponent implements OnInit {
  title: string;

  ngOnInit(): void {

  }
}

page-header.component

export class PageHeaderComponent extends AppComponent implements OnInit {

  constructor() {
    super();
  }

  ngOnInit() {
    super.ngOnInit();
  }

}

page-header.component.html

<h1>{{title}}</h1>

dashboard.component

export class DashboardComponent extends AppComponent {

  constructor() {
    super();
  }

  ngOnInit() {
    super.ngOnInit();
    this.title = "Dashboard";
  }
}

为了更清晰，我添加了图片：

我想在任何组件（AppComponent 的子组件）中轻松设置标题，并将标题写入页眉组件

【问题讨论】：

您可以创建一个common-component 并通过将其他组件作为子组件在整个页面中使用它

标签： angular components

【解决方案1】：

您使事情变得过于复杂了，您有两种方法可以通过使用服务或使用 @Input 装饰器来共享数据，就像这样

在page-header.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <h1>{{title}}</h1>
  `
})
export class PageHeaderComponent {
  @Input() title: string;
}

在page-header.component.ts 的父组件app.component.ts 中，您执行以下操作

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child [title]="parentTitle"</app-child>
  `
})
export class AppComponent {
 @Input() parentTitle: string;
}

在app.component.ts 的父组件中，你可以使用dashboard.component.ts

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

@Component({
selector: 'app-parent-parent'
template : `
<app-parent [parentTitle] = "parentParentTitle"</app-parent>
`
})
  export class DashboardComponent {
 parentParentTitle = "Dashboard";     
 }

或者，您可以使用 setter 和 getter 方法创建服务，然后将其注入三个组件中以在所有组件之间设置或获取数据。

【讨论】：

但是当我从 AppComponent 创建子组件并在 ngOninput 中设置 this.parentTitle 时，不要更改 page-header.component
你的问题不是很清楚，但你可以尝试在AppComponent的构造函数中设置parentTitle而不是在ngOnInit()方法中
@bluray 是的，现在很清楚，我还更新了我的答案，向您展示了如何使用父子关系方法来做到这一点，但是如果您想使用第二种方法来创建服务，只需让我知道，我会为你写完整的 3 个组件

【解决方案2】：

你可以使用 ngRedux ：

从你的 cmd 运行
```
npm install --save-dev ng2-redux redux
```

在你的 app.module.ts 在你的构造函数中添加 ngRedux

export class AppModule {
 constructor(ngRedux : NgRedux<IAppState>){
    ngRedux.configureStore(rootReducer, INITIAL_STATE);
 }
}

创建 store.ts 文件并清除所有共享数据

export interface IAppState {
  globalData?: Data;
}

export const INITIAL_STATE: IAppState = {
  globalData: null
};

export function rootReducer(state: IAppState = INITIAL_STATE, action: Action): IAppState {

switch (action.type) { 案例更新数据：返回 Object.assign(state, state, (action)); 默认：返回状态； } }

创建 action.ts 文件

 export const UPDATE_DATA = 'UPDATE_DATA';

 export interface UpdateGlobalAction extends Action {
   globalData: Data;
 }

在你的组件构造函数中注入 ngRedux

 constructor(private ngRedux : NgRedux<IAppState>) {

 }

 //call to share data
 this.ngRedux.getState().globalData

你可以更新你的共享数据

 this.ngRedux.dispatch({type : UPDATE_DATA, globalData : data} as UpdateGlobalAction);

【讨论】：

【解决方案3】：

Services 是一个很好的解决方案，您可以像这样使用它：

app.component.ts

import {Component} from 'angular2/core';
import {MySecondSvc} from '../services/MySecondSvc';
@Component({
  selector: 'my-app',
  template: '{{title}}'
})
export class AppComponent {
  title = "Angular 2 beta";
  constructor(private _secondSvc:MySecondSvc) { console.clear(); }
  ngOnInit() {
    this.title = this._secondSvc.getValue();
  }
}

MySecondSvc.service.ts

import {Injectable} from 'angular2/core';

@Injectable()
export class MySecondSvc {
  title = "Hello";
  getValue() {
    return this.title;
  }
}

live

【讨论】：

谢谢，但是当我使用这个解决方案时，我必须将 MySecondSvc 注入所有组件。我只想调用 this.title 属性。

【解决方案4】：

我正在创建简单的示例。我的问题是 app.component.html 不更新属性标题。

extend class AppCoponent {
 title: string;
 constructor(){this.title = "App"}
}

app.component.html：

<h1>{{title}}</h1>

仪表板组件

  extend class DashboardComponent extend AppComponent{
     constructor(){
     this.title = "Dashboard";
    }
    }

在标题中始终是 App 而不是 Dashboard

【讨论】：