Вызов массива, который использует глобальный файл машинописи внутри html-файла для Angular 7+

Question

У меня проблема с вызовом массива внутри моего HTML-файла с использованием файла global.ts для angular. Когда вы используете массив, как правило, вы даете элементу имя массива, а затем его родственную переменную, которая будет зацикливаться с помощью этого * 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

сначала вы должны импортировать global.ts в component.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>