Переключить шаблон HTML, Scss динамически в угловых

Question

У меня есть компонент заголовка, как в следующем формате:

app-header (folder)
     classic (folder)
         app-header.component.html
         app-header.component.scss

    elegant (folder)
         app-header.component.html
         app-header.component.scss

    simple (folder)
         app-header.component.html
         app-header.component.scss

 app-header.component.ts

Я хочу переключаться между этими папками шаблонов (классические, элегантные, простые) динамически. Я имею в виду, получить имя папки шаблона из db через http-запрос и загрузить html и стиль из этой папки соответственно.

Я сделал это, установив имя папки в переменной окружения и загрузив в соответствии с этим. Как я могу установить эту переменную среды, вызвав API и загрузив HTML и стили в соответствии с этим?

Ниже приведен код, который я пытался загрузить из переменной среды в app-header-component.ts

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

let theme_name  = environment.theme_name;

const header      = require('./' + theme_name + '/app- 
header.component.html');

const style     = [require('./' + theme_name + '/app- 
header.component.scss')];

@Component({
    selector: 'app-header',
    template: header,
    styles: style
})

Answer 1

Вы пробовали что-то подобное?

@Component({
  selector: 'selector',
  templateUrl: environment.template_path,
  styleUrls: [environment.style_path]
})

Answer 2

Родительский компонент может отслеживать тему и позволять ей решать, какой компонент заголовка отображать.

<app-header-classic *ngIf="theme === 'classic'"></app-header-classic>
<app-header-elegant *ngIf="theme === 'elegant'"></app-header-elegant>
<app-header-simple *ngIf="theme === 'simple'"></app-header-simple>