angular4 - 创建一个也可以在视图中访问的全局变量

Question

是否可以创建可以从组件和视图访问的全局变量？

目前我创建了一个像这样的global.ts文件:

export const GlobalVariable = Object.freeze({
  BASE_API_URL: 'http://www.asdf.com/'
});

然后我必须在每个组件中导入它:

import { GlobalVariable } from '../shared/global';

然后我可以在这些组件中使用"GlobalVariable.BASE_API_URL".我不喜欢它有两个问题.首先,我必须在每个组件中导入它的部分,是否可以对所有组件进行一次导入？但实际上这是我可以忍受的问题.更大的问题是我似乎可以在我的html文件中访问该变量.这有解决方案吗？

Answer 1

你可以在某种程度上,是的.您可以创建服务,在该服务中定义属性,然后您可以从任何组件或任何模板访问该属性...只要将服务注入组件即可.

服务:

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语句导入服务,并在需要它的每个组件中使用构造函数注入服务.