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

Question

是否可以创建一个可以从组件和 View 访问的全局变量？

目前我创建了一个 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

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

服务:

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 语句导入服务，并使用构造函数将服务注入(inject)到每个需要它的组件中。