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

Answer 2

答案是否定的，您的模板范围限定为组件类，即您只能访问组件类中声明或可见的任何内容。您无法访问全局范围内的任何内容，例如，在您的html模板文件中，如果您这样做

{{ JSON.parse('{"message": "Hello World"}') }}

您会看到Cannot read property 'parse' of undefined或类似的内容

因此，要在模板中访问该全局变量，必须每次都将其导入到组件类中

Answer 3

看起来有点hacky但你可以使用管道。这样可以避免在每个组件中重复注入或变量绑定。

@Pipe({
    name: 'global',
})
export class GlobalVariablePipe implements PipeTransform {

    transform(value: any): object {
        return GlobalVariable;
    }
}

然后，一旦在您的模块中导入，您只需按如下方式使用管道：

{{(''|global).BASE_API_URL}}

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

3 个答案: