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

在angular 6组件html中全局访问js对象

1 个答案: