在angular 6組件html中全局訪問js對象

Question

我正在使用Angular6。我有一個內容為somefile.js的文件：

SomeObject = {
    value1: "Some value",
    value2: "Some value2"
}

我有多個組件，我想在任何組件html中訪問此文件/對象的這些值。

例如，在我的組件.html文件中，我想像這樣訪問該文件：

<div>
 {{ SomeObject.value1 }}
</div>

我怎樣才能實現這樣的目標？

Answer 1

您的模板只能看到在組件上公開的內容。 這意味着您需要在組件上創建一個公共字段，然后將對象分配給該字段。

import { SomeObject } from './path/to/some/object';

@Component({
// ...
})
export class FooComponent {
    SomeObject = SomeObject;
}

如果您在許多地方都需要該對象，則可以定義一個裝飾器來為您完成此任務。

定義裝飾器：

import { SomeObject } from './path/to/some/object';

export function SomeObjectDecorator(): Function {
    return (constructor: Function) => {
        constructor.prototype.SomeObject = SomeObject;
    }
}

將其應用於組件

import { SomeObjectDecorator } from './path/to/some/object/decorator';

@Component({
// ...
})
@SomeObjectDecorator()
export class FooComponent {
}