代码之家 › 专栏 › 技术社区 › Pegaz

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

angular6 angular javascript

0

Pegaz · 技术社区 · 6 年前

我用的是角6。我有一个包含以下内容的somefile.js文件:

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

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

例如,在我的components.html文件中,我想访问如下文件:

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

我怎么能做到这样?

1 回复 | 直到 6 年前

1

2

tom van green 6 年前

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

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

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

如果您在许多地方需要这个对象,那么可以定义一个decorator来实现这一点。

定义decorator:

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