angular - Angular 动态切换模板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

我想在这些模板文件夹之间切换(经典、优雅、简单) 动态地。我的意思是，通过 http 请求从 db 获取模板文件夹名称，并分别从该文件夹加载 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

父组件可以跟踪主题并让它决定呈现哪个标题组件。

<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>