Angular2在组件之间共享数据

你好，我想分享组件之间的标题。我有组件app.component声明标题属性和所有其他组件是儿童。我有page-header.component写标题的HTML和dashboard.component设置标题属性和标题不显示。这里是我的代码：Angular2在组件之间共享数据

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的孩子）和标题将被写入到页头标组件

来源

2017-05-25 bluray

你可以创建一个'共component'和使用它通过让其他组件作为子页面穿过页面 – Aravind

你过于复杂，你有两种方式来分享在角度数据情况是否通过使用服务或通过使用@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方法的服务，并将它注入到三个组件中以在所有组件之间设置或获取数据。

来源

2017-05-25 08:37:10

但是，当我从AppComponent创建子，并在ngOninput我设置this.parentTitle，不会改变在page-header.component – bluray

你的问题是不是很清楚，但你可以尝试设置'AppComponent'的构造函数中的'parentTitle'不在'ngOnInit（）'方法中 –

我更新了我的问题，我希望现在清楚。 – bluray

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

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

来源

2017-05-25 08:33:58

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

您可以使用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文件和decleare疗法您的共享数据，

export interface IAppState { 
    globalData?: Data; 
} 

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

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

开关（action.type）{ 情况UPDATE_DATA：返回Object.assign（状态，状态，（行动））; 默认值：返回状态; }}

创建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);

来源

2017-05-25 09:01:08

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

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

在标题为八方通应用程序，而不是仪表盘

来源

2017-05-25 09:12:59 bluray

Angular2在组件之间共享数据

回答

相关问题