时间戳

首页 > 解决方案 > 在 Angular 6 组件 html 中全局访问 js 对象

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

问题描述

我正在使用 Angular 6。我有一些包含内容的文件：

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

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

例如，在我的组件 .html 文件中，我想访问此文件，例如：

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

我怎么能做到这样的事情？

标签： javascriptangularangular6

解决方案

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

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

推荐阅读