javascript - 在Angular 6组件html中全局访问js对象

Question

我正在使用 Angular 6。我有 somefile.js 文件，其内容为:

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

我有多个组件，我想在我的任何组件 html 中访问此文件/对象的这些值。

例如，在我的组件 .html 文件中，我想访问此文件，如下所示:

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

我怎样才能实现这样的目标？

Answer 1

您的模板只能看到组件上公开的内容。这意味着您需要在组件上创建一个公共(public)字段并将您的对象分配给该字段。

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 {
}