Angular2 Share data between components

问题

Hello i would like to share title between components. I have component app.component which declare title property and all another components are children. I have page-header.component which write title to html and dashboard.component which set title property and title dont show. Here is my code:

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

For greater clarity i added image:

I would like to easy set title in any component (child of AppComponent) and title will be write to page header component

回答1:

you are overcomplicating things you have two ways to share data in angular whether by using a service or by using the @Input decorator just like this

in the page-header.component.ts

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

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

in the parent component of page-header.component.ts which is app.component.ts you do the following

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

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

and in the parent component of app.component.ts which is the dashboard.component.ts you do

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

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

alternatively, you can create a service with a setter and getter methods and you inject it in the three components to set or get data between all of them.

回答2:

you can use ngRedux :

run from you cmd
```
npm install --save-dev ng2-redux redux
```

at your app.module.ts add ngRedux at your constructor

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

create store.ts file and decleare ther all your share data

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)); default: return state; } }

Create action.ts file

 export const UPDATE_DATA = 'UPDATE_DATA';

 export interface UpdateGlobalAction extends Action {
   globalData: Data;
 }

at your components constructor inject ngRedux

 constructor(private ngRedux : NgRedux<IAppState>) {

 }

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

you can update you share data with

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

回答3:

Services is a good solution you can use it for example like this :

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

回答4:

I was create simple example. My problem is app.component.html dont update property title.

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

app.component.html:

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

DashboardComponent

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

In title is allways App instead of Dashboard

来源：https://stackoverflow.com/questions/44175781/angular2-share-data-between-components

标签

angular

components