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的孩子)和标题将被写入到页头标组件
你过于复杂,你有两种方式来分享在角度数据情况是否通过使用服务或通过使用@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方法的服务,并将它注入到三个组件中以在所有组件之间设置或获取数据。
服务是您可以使用它,例如这样一个很好的解决方案:
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;
}
}
谢谢,但是当我使用这个解决方案时,我必须将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);
我创建了一个简单的例子。我的问题是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";
}
}
在标题为八方通应用程序,而不是仪表盘
你可以创建一个'共component'和使用它通过让其他组件作为子页面穿过页面 – Aravind