NullInjectorError: Отсутствует поставщик глобальных ресурсов

Im пытается создать файл глобальных переменных с помощью углового 6. Переменные в этом файле могут быть изменены другими компонентами. Поэтому я увидел этот образец и попытался реализовать его в своем проекте.

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { Globals } from './globals';

import { AppComponent } from './app.component';
import { SideMenuComponent } from './side-menu/side-menu.component';

@NgModule({
  declarations: [
    AppComponent,
    SideMenuComponent
  ],
  imports: [
    BrowserModule,
  ],
  providers: [ Globals ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Побочный menu.component.ts:

import { Component, OnInit } from '@angular/core';
import { sideMenu } from './side-menu.links.js';
import { Globals } from '../globals.js';

@Component({
  selector: 'side-menu',
  templateUrl: './side-menu.component.html',
  styleUrls: ['./side-menu.component.css']
})
export class SideMenuComponent implements OnInit {

  isSideMenuOpen: boolean;
  mainLinks: {url: string, target: string}[]}[] = []
  bottomNav: {url: string, target: string}[]}[] = []

  constructor(private globals: Globals) { 
    this.isSideMenuOpen = globals.isSideMenuOpen;
  }

  ngOnInit() {
    this.mainLinks = sideMenu.mainLinks;
  }

  toggleSideMenu() {
    this.globals.isSideMenuOpen = !this.isSideMenuOpen;
  }

}

globals.ts:

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

@Injectable()
export class Globals {
  isSideMenuOpen: boolean = true;
}

index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ConfigUi</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body [class.sidemenu-open]="globals.isSideMenuOpen">
  <app-root class="grafana-app"></app-root>
</body>
</html>

isSideMenuOpenБулево используется для добавления или удаления класса из организма. Эта переменная переключается на функциональность внутри компонента бокового меню с помощью toggleSideMenu()кнопки.

Ошибка:

StaticInjectorError(AppModule)[SideMenuComponent -> Globals]: 
  StaticInjectorError(Platform: core)[SideMenuComponent -> Globals]: 
    NullInjectorError: No provider for Globals!

Почему это не работает? Как мне заставить работать?

javascript,html,angular,

0

Ответов: 0

NullInjectorError: Отсутствует поставщик глобальных ресурсов

Im пытается создать файл глобальных переменных с помощью углового 6. Переменные в этом файле могут быть изменены другими компонентами. Поэтому я увидел этот образец и попытался реализовать его в своем проекте.

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { Globals } from './globals';

import { AppComponent } from './app.component';
import { SideMenuComponent } from './side-menu/side-menu.component';

@NgModule({
  declarations: [
    AppComponent,
    SideMenuComponent
  ],
  imports: [
    BrowserModule,
  ],
  providers: [ Globals ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Побочный menu.component.ts:

import { Component, OnInit } from '@angular/core';
import { sideMenu } from './side-menu.links.js';
import { Globals } from '../globals.js';

@Component({
  selector: 'side-menu',
  templateUrl: './side-menu.component.html',
  styleUrls: ['./side-menu.component.css']
})
export class SideMenuComponent implements OnInit {

  isSideMenuOpen: boolean;
  mainLinks: {url: string, target: string}[]}[] = []
  bottomNav: {url: string, target: string}[]}[] = []

  constructor(private globals: Globals) { 
    this.isSideMenuOpen = globals.isSideMenuOpen;
  }

  ngOnInit() {
    this.mainLinks = sideMenu.mainLinks;
  }

  toggleSideMenu() {
    this.globals.isSideMenuOpen = !this.isSideMenuOpen;
  }

}

globals.ts:

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

@Injectable()
export class Globals {
  isSideMenuOpen: boolean = true;
}

index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ConfigUi</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body [class.sidemenu-open]="globals.isSideMenuOpen">
  <app-root class="grafana-app"></app-root>
</body>
</html>

isSideMenuOpenБулево используется для добавления или удаления класса из организма. Эта переменная переключается на функциональность внутри компонента бокового меню с помощью toggleSideMenu()кнопки.

Ошибка:

StaticInjectorError(AppModule)[SideMenuComponent -> Globals]: 
  StaticInjectorError(Platform: core)[SideMenuComponent -> Globals]: 
    NullInjectorError: No provider for Globals!

Почему это не работает? Как мне заставить работать?

00JavaScript, HTML, угловые,
Похожие вопросы
Яндекс.Метрика