Angular 单页项目如何设置全局变灰？

这个项目使用的是 ng-alain 开发。

基础开发

src\app\app.component.ts 在这个文件中，我们看构造函数部分

  constructor(
    el: ElementRef,
    renderer: Renderer2,
    private router: Router,
    private titleSrv: TitleService,
    private modalSrv: NzModalService
  ) {
    renderer.setAttribute(el.nativeElement, 'ng-alain-version', VERSION_ALAIN.full);
    renderer.setAttribute(el.nativeElement, 'ng-zorro-version', VERSION_ZORRO.full);
  }

这一部分是把 ng-alain 的相关版本号，直接在了单页项目的根节点上。

所以，我们可以参考这个，同样可以设置全局的样式。

参考各大网站的样式，主要就是通过 filter 属性设置。代码如下

.global-grey {
    filter: grayscale(100%);
}

所以。最后代码如下：

  constructor(
    el: ElementRef,
    renderer: Renderer2,
    private router: Router,
    private titleSrv: TitleService,
    private modalSrv: NzModalService
  ) {
    renderer.setAttribute(el.nativeElement, 'ng-alain-version', VERSION_ALAIN.full);
    renderer.setAttribute(el.nativeElement, 'ng-zorro-version', VERSION_ZORRO.full);
    renderer.setAttribute(el.nativeElement, 'style', 'filter: grayscale(100%)');
  }

更进一步

如何让项目不用重新编译，改变全局样式？

src\assets\data\app.json 在这个 json 文件内增加一个配置如："isGrey": true

src\app\@core\startup\startup.service.ts 在这个全局启动文件的 load() 方法内，读取上述静态文件，然后把配置赋值给全局的 ConfigService。代码大致如下:

get configSrv() {
    return this.injector.get(ConfigService);
}
  
load(): Promise<any> {
    return new Promise((resolve, reject) => {
      zip(this.httpClient.get(`assets/data/app.json`))
        .pipe(
          // 接收其他拦截器后产生的异常消息
          catchError(([appData]) => {
            resolve(null);
            return [appData];
          })
        )
        .subscribe(
          ([appData]) => {
            this.configSrv.config = appData;
          },
          err => {},
          () => {
            resolve(null);
          }
        );
    });
  }

这样我们就可以不用重新编译，仅仅修改静态 json 文件，实时变更我们项目的配置。

然后，我们再改造一下src\app\app.component.ts 这个文件的构造函数部分，代码如下：

  constructor(
    el: ElementRef,
    renderer: Renderer2,
    private router: Router,
    private titleSrv: TitleService,
    private modalSrv: NzModalService,
    private configSrv: ConfigService
  ) {
    renderer.setAttribute(el.nativeElement, 'ng-alain-version', VERSION_ALAIN.full);
    renderer.setAttribute(el.nativeElement, 'ng-zorro-version', VERSION_ZORRO.full);

    if (this.configSrv.config.app.isGrey) {
      renderer.setAttribute(el.nativeElement, 'style', 'filter: grayscale(100%)');
    }
  }

最后

希望文章对大家有一点启发。有更好的建议，请帮忙指出，一起成长。