Angular2在组件之间共享数据

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

应用程序组件

export class AppComponent implements OnInit {
  title: string;

  ngOnInit(): void {

  }
}

export class PageHeaderComponent extends AppComponent implements OnInit {

  constructor() {
    super();
  }

  ngOnInit() {
    super.ngOnInit();
  }

}

export class DashboardComponent extends AppComponent {

  constructor() {
    super();
  }

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

页面标题。组件

export class AppComponent implements OnInit {
  title: string;

  ngOnInit(): void {

  }
}

export class PageHeaderComponent extends AppComponent implements OnInit {

  constructor() {
    super();
  }

  ngOnInit() {
    super.ngOnInit();
  }

}

export class DashboardComponent extends AppComponent {

  constructor() {
    super();
  }

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

页面标题.component.html

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

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

---

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

服务是一个很好的解决方案，您可以使用它，例如：

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

---

您将事情复杂化了。您有两种方法来共享数据，一种是使用服务，另一种是使用

@Input

装饰器，就像这样

在

页面标题.component.ts中

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

@Component({
  selector: 'app-child',
  template: `
    <h1>{{title}}</h1>
  `
})
export class PageHeaderComponent {
  @Input() title: 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";     
 }

从'@angular/core'导入{Component}；
@组成部分({
选择器：“应用程序父级”
模板：`
您可以使用ngRedux：


从你身边跑开

npm install --save-dev ng2-redux redux


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

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

开关（动作类型）{
案例更新数据：
返回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


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

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

app.component.html：

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

在title是allways应用程序而不是Dashboard中
您可以创建一个
通用组件
，并通过将其他组件作为子组件在整个页面中使用它谢谢，但是当我使用此解决方案时，我必须将MySecondSvc注入所有组件。我只想调用this.title属性。但是当我从AppComponent和在ngOninput中创建子组件时我设置了这个。parentTitle，不要在页眉中更改。component您的问题不太清楚，但是您能否尝试在
AppComponent的构造函数中设置
parentTitle
，而不是在
ngOnInit（）中设置
method@bluray是的，现在很清楚了，我也更新了我的答案，告诉你如何使用父子关系方法来创建服务，但是如果你想使用第二种方法来创建服务，请告诉我，我将为你编写完整的3个组件
  extend class DashboardComponent extend AppComponent{
     constructor(){
     this.title = "Dashboard";
    }
    }