Question

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

app.component

export class AppComponent implements OnInit {
  title: string;

  ngOnInit(): void {

  }
}

页-header.component

export class PageHeaderComponent extends AppComponent implements OnInit {

  constructor() {
    super();
  }

  ngOnInit() {
    super.ngOnInit();
  }

}

页-header.component.html

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

dashboard.component

export class DashboardComponent extends AppComponent {

  constructor() {
    super();
  }

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

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

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

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

<{1>}的父组件中的

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

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

Answer 2

你可以使用ngRedux：

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

在构造函数中添加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）{ case UPDATE_DATA： return 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);

Answer 3

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

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

Answer 4

我创造了一个简单的例子。我的问题是app.component.html不要更新属性标题。

  project
    |
    |
   application
   templates
   manage.py
   project
    |
     settings.py
     urls.py
  public
     |
     static
     html files

app.component.html：

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

DashboardComponent

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

标题是allways App而不是Dashboard

Angular2在组件之间共享数据

4 个答案: