如何基于条件（特定环境）隐藏Angular组件

Question

我有一个检查我的环境是什么的函数，并且会根据环境找到正确的config.json文件。我使用switch语句。

我需要一个组件来加载主页，显示环境名称。我创建了此组件，并将其名称放在home组件中的尖括号中，并且当加载home组件时，现在会出现带有环境信息的消息。现在，我需要弄清楚如何隐藏该组件（如果在一个组件中）特定环境。

this is my home component html file:

<app-show-environment></app-show-environment>
<div class="home-page text-center">
  <div class="home-inner">
    <h1 class="display-2 mb-5" translate>DASHBOARD</h1>
<!--    <router-outlet></router-outlet>-->
  </div>
</div>

这是我的showEnvironment组件：

<h1>
  You are now in the {{currentEnv}} environment.
</h1>

这是我的showEnvironment ts文件：

import { Component, OnInit } from '@angular/core';
import {environment} from "../../../environments/environment";


@Component({
  selector: 'app-show-environment',
  templateUrl: './show-environment.component.html',
  styleUrls: ['./show-environment.component.scss']
})
export class ShowEnvironmentComponent implements OnInit {
  currentEnv: string;

  constructor() {
    this.currentEnv = environment.name;
  }


  ngOnInit() {
  }

}

Answer 1

您可以使用*ngIf有条件地渲染模板。我仅以production为例。

<h1 *ngIf="currentEnv !== 'production'">
  You are now in the {{currentEnv}} environment.
</h1>

https://angular.io/guide/displaying-data#conditional-display-with-ngif