是否可以创建可以从组件和视图访问的全局变量？
目前我创建了一个像这样的global.ts文件：
export const GlobalVariable = Object.freeze({
BASE_API_URL: 'http://www.asdf.com/'
});
然后我必须在每个组件中导入它：
import { GlobalVariable } from '../shared/global';
然后我可以在这些组件中使用“GlobalVariable.BASE_API_URL”.我不喜欢它有两个问题.首先,我必须在每个组件中导入它的部分,是否可以对所有组件进行一次导入？但实际上这是我可以忍受的问题.更大的问题是我似乎可以在我的html文件中访问该变量.这有解决方案吗？
解决方法
你可以在某种程度上,是的.您可以创建服务,在该服务中定义属性,然后您可以从任何组件或任何模板访问该属性…只要将服务注入组件即可.
服务：
import { Injectable } from '@angular/core';
@Injectable()
export class DataService {
serviceData: string;
}
组件/模板：
import { Component } from '@angular/core'
import { DataService } from './data.service';
@Component({
template: `
<div>
<h2>Data: {{ dataService.serviceData }} </h2>
</div>
`
})
export class A {
constructor(public dataService: DataService) {
console.log(dataService.serviceData);
}
}
但请注意,您确实需要使用imports语句导入服务,并在需要它的每个组件中使用构造函数注入服务.
