全!我有这样一个组件，当我单击HREF时，如果它的Angular 是1，那么它应该将一个变量设置为Root Scope:
selector: 'my-component'
template : `
<div (click)="addTag(1, 'abc')">`
constructor() {
this.addTag = function(id, desc){
myGlobalVar = { a: id, b: desc};
};
然后在我的父组件中，页面本身(事实上)我应该做如下操作:
<my-component></my-component>
<p>My Component is returning me {{ ?????? }}
做这样的事情最好的方法是什么？
要实现全局变量，您可以实现共享服务.您将能够保存它的数据，并且所有组件都可以访问它们.
为此，只需在增强应用程序时实现服务并设置其提供程序:
bootstrap(AppComponent, [ MySharedService ]);
注意不要在要使用它的组件的providers属性内再次定义它.
Sample
该服务:
export class MySharedService {
data: any;
dataChange: Observable<any>;
constructor() {
this.dataChange = new Observable((observer:Observer) {
this.dataChangeObserver = observer;
});
}
setData(data:any) {
this.data = data;
this.dataChangeObserver.next(this.data);
}
}
将其用于组件:
@Component({
(...)
})
export class MyComponent {
constructor(private service:MySharedService) {
}
setData() {
this.service.setData({ attr: 'some value' });
}
}
如果要通知组件数据已更新，可以利用可观察字段进入共享服务:
@Component({
(...)
})
export class MyComponent {
constructor(private service:MySharedService) {
this.service.dataChange.subscribe((data) => {
this.data = data;
});
}
}
有关更多详细信息，请参阅此问题:
这一页是有Angular 的.io网站也会让你感兴趣: