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

是否可以创建一个可以从组件和视图访问的全局变量？angular4 - 创建一个全局变量，也可以在视图中访问

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

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

然后，我必须将其导入每个组件：

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

然后我可以使用“GlobalVariable.BASE_API_URL “在这些组件中。有两个问题，我不喜欢它。首先，我必须将其导入到每个组件中，是否可以为所有组件导入一次？但实际上这是我可以忍受的一个问题。更大的问题是，我似乎可以在我的html文件中访问该变量。有没有解决方案？

来源

2017-06-19 user1985273

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

服务：

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); 
    } 
}

但是请注意，你做需要进口与进口声明服务和使用构造函数中的每个组件注入服务需要它。

来源

2017-06-19 23:56:31 DeborahK

有没有什么办法可以在不使用服务的情况下创建全局变量？或者，服务是创建全局变量的好方法吗？你能进一步描述它吗？谢谢。 –

答案是否定的，你的模板的范围是组件类，即你只能访问组件类中声明或可见的任何东西。你不能在全球范围内访问任何东西，例如，在你的HTML模板文件，如果你这样做

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

你会看到Cannot read property 'parse' of undefined或类似的

东西，所以访问全局变量在你的模板中，你必须每次将它导入你的组件类

来源

2017-06-19 19:17:35 Dummy

好的，但我如何访问我的模板中的这个全局变量？即使我在我的模板中导入并写入{{GlobalVariable.BASE_API_URL}}，我也不会显示任何内容。 – user1985273

这很奇怪，我不是为什么它没有显示任何东西，尝试在你的组件中创建一个新的变量'url'，并且给它分配'GlobalVariable.BASE_API_UR'，然后在你的模板中访问'url'。 – Dummy

是的，这有效，但它似乎是最好的解决方案。我可以在每个组件中导入文件，但是如果我必须在每次丢失其原始点时将每行重新定义为变量 – user1985273

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

回答

相关问题