在 Angular 7+ 的 html 文件中调用使用全局打字稿文件的数组

Question

我在使用 angular 的 global.ts 文件调用我的 HTML 文件中的数组时遇到问题。当你使用一个数组时，通常你给元素一个数组名称，然后是它的兄弟变量，它将使用这个 *ngFor="let element of elements" 循环。我已经使用导入调用 global.ts 文件并设置了构造。

<div ngxSlickItem *ngFor="let slide of slides" class="slide">
    <div class="slide-header">
        {{ slide.header }}
    </div>
    <div class="slide-paragraph">
        {{ slide.paragraph }}
    </div>
    <div class="slide-link">
        <a href="{{ slide.link }}">
            Learn More
        </a>
    </div>
</div>

但是，您将如何使用使用数组的 global.ts 文件调用数组？通常在全局打字稿文件中使用一个简单的变量看起来像这样。我试过 globals.slide.header 但这似乎不对。

<a class="nav-button btn btn-primary" href="#">
  {{globals.globalHrefLink}}
</a>

我已经创建了这个 ts 文件：

import { Injectable } from '@angular/core';

@Injectable()
export class Globals {
    // Anchor Link
    globalHrefLink = 'new request';

    navitems = [
        {
            navTitle: 'home',
            routelink: '/home',
        },
        {
            navTitle: 'my request',
            routelink: '/myrequest',
        }
    ];
}

但是如何在标题组件中调用它呢？

<ul class="navbar-nav ml-auto flex-nowrap" *ngFor="let navitem of navitems" class="navitem">
  <li class="nav-item">
      <a class="nav-item nav-link active" routerLink="{{navitem.routelink}}">{{navitem.navTitle}}</a>
  </li>
</ul>

帮助感谢感谢！

Answer 1

首先你必须在 component.ts 中导入 global.ts

import { AppGlobals } from '../app.globals';

export class Abc {
constructor(public globals: AppGlobals) {}

}

现在您可以使用任何全局变量，例如您有一个元素数组 在globals.ts 喜欢

elements = [ { NAME: 'test'} ];

<div *ngFor="let el of globals.elements">
  {{el.NAME}}
</div>