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在組件之間共享數據

回答

相關問題