angular - Använda miljövariabler i mallfiler

Är det möjligt att använda miljövariabler i mallfiler?

Jag försöker för närvarande den här syntaxen:

<img class="preview-image" src="{{environment.assets + item.image}}" />

vilket resulterar i följande fel:

Identifier 'environment' är inte definierad. Komponentdeklarationen, mallvariabeldeklarationer och elementreferenser innehåller inte en sådan medlem

Jag har försökt importera det i min component.ts-fil, import { environment } from './../../../../environments/environment'; men det förändrade ingenting.

Svar #1

Definiera bara den publika environment-variabeln i kontrollern med värdet, sedan kan du komma åt den i mallen:

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

export class AppComponent {

  environment = environment;

}

Svar #2

Lösning utan att ändra varje .ts-komponent

Jag gillade verkligen inte idén om att ändra varje .ts-komponentfil, så jag föreslår att använda en pipe som kan användas överallt i ditt projekt:

import {Pipe, PipeTransform} from '@angular/core';
import {environment} from '../environments/environment';

@Pipe({name: 'env'})
export class EnvPipe implements PipeTransform {
  transform(variable: keyof typeof environment): any {
    return environment[variable];
  }
}

Sedan, i din HTML, använd bara:

<span>{{'variableName' | env}}</span>

I ditt fall:

<img class="preview-image" src="{{'assets' | env}}{{item.image}}" />

Relaterade artiklar