Moh*_*qui 5 html javascript angular
我正在尝试使用 Angular 6 创建一个全局变量文件。此文件中的变量可以由其他组件更改。所以我看到了这个示例并尝试在我的项目中实现它。
应用程序模块.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 { }
side-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;
}
}
全局变量.ts：
import { Injectable } from '@angular/core';
@Injectable()
export class Globals {
isSideMenuOpen: boolean = true;
}
索引.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!
为什么这不起作用？我该如何让它发挥作用？
我正在使用相同的示例
如果您在 app.module.ts 中添加 Globals 作为 Provider，它应该可以工作。
我所做的是：
全局变量：
import { Injectable } from '@angular/core';
@Injectable()
export class Globals {
section: string = 'Value';
changeValue(value: string){
this.section = value;
}
}
在组件处：
import { Globals } from '../globals';
export ClassName implement OnInit {
g: Globals;
constructor(public globals: Globals){
this.g = globals;
}
}
然后修改该值，在html中：
<div (click)="g.changeValue('StringValue')"> <div>