angular4 - ビューでもアクセスできるグローバル変数を作成

Question

コンポーネントとビューの両方からアクセスできるグローバル変数を作成できますか？

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

し、私はすべてのコンポーネントで、それをインポートする必要があります：

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

それから私は「GlobalVariable.BASE_API_URLを使用することができます私はこのようなglobal.tsファイルを作成した時点では

これらのコンポーネントに含まれています。それは私が好きではない2つの問題があります。まず、すべてのコンポーネントでインポートする必要がある部分は、すべてのコンポーネントを一度インポートすることが可能ですか？しかし、実際には私が暮らすことができる問題です。より大きな問題は、私は自分の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); 
    } 
} 

しかし、あなたはすべてのコンポーネントにインポート文を使用してサービスをインポートし、コンストラクタを使用してサービスを注入する必要性を行うことに気付きますそれが必要です。

Answer 2

答えはいいえです。テンプレートはコンポーネントクラスにスコープされています。つまり、コンポーネントクラス内で宣言されているか可視であるものにのみアクセスできます。あなたは

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

を行う場合は、そのグローバル変数にアクセスすること

だから、のようなCannot read property 'parse' of undefinedか何かを見ることができます、あなたのHTMLテンプレートファイルに、例えば、グローバルスコープで何かをアクセスすることはできませんテンプレートで毎回コンポーネントクラスにインポートする必要があります