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

发布时间：2020-12-17 06:53:54 所属栏目：安全来源：网络整理

导读：是否可以创建可以从组件和视图访问的全局变量？目前我创建了一个像这样的global.ts文件： export const GlobalVariable = Object.freeze({ BASE_API_URL: 'http://www.asdf.com/'}); 然后我必须在每个组件中导入它： import { GlobalVariable } from '../sh

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

目前我创建了一个像这样的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语句导入服务,并在需要它的每个组件中使用构造函数注入服务.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!