Angular 模板：在生产模式下禁用 div

Question

我的 Web 应用程序中有几个 div 仅用于调试，我想在生产模式下删除它们。

在我的模板中，我试图做这样的事情：

<div *ngIf=!environment.production>{{ fooState | async | json}}</div>

但是，当运行 ng serve --prod 时失败并出现以下错误：

ERROR in src/app/foo/foo.component.html(18,6): : Property 'environment' does not exist on type 'Foo'

有没有办法在生产模式下禁用这些而不向每个组件添加另一个字段？

我正在使用 Angular cli 1.7.4 和 Angular 5.2.10

Answer 1

你的条件是对的：*ngIf="!environment.production"

尽管您需要在组件中导入环境对象。

import { environment } from 'src/environments/environment';

Component({...})
export class MyComponent {
  public environment = environment;
}

Answer 2

您可以创建一个指令，仅在 environment.production 为 false 时显示您的 div 元素。类似于这个 blitzstack 示例： https://stackblitz.com/edit/angular-eziobx

import { Directive, ViewContainerRef, OnInit, TemplateRef } from '@angular/core';
import { environment } from '../environment';

/**
 * usage: <div *hideProd></div>
 */
@Directive({
  selector: '[hideProd]'
})
export class HideProdDirective implements OnInit{

  constructor(private templateRef: TemplateRef<any>, private viewContainerRef: ViewContainerRef) { }

  ngOnInit(): void {
    if(!environment.prod){
      this.viewContainerRef.createEmbeddedView(this.templateRef);
    }
  }

}

Angular 模板：在生产模式下禁用 div

Angular template: Disable div in production mode

angular

typescript

production-environment