以角度动态切换模板html，scss答案

【问题标题】：Switch template html,scss dynamically in angular以角度动态切换模板html，scss
【发布时间】：2019-07-03 22:48:14
【问题描述】：

我有如下格式的标题组件：

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-request 从 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
})

【问题讨论】：

为什么每个主题都需要 html？ CSS 还不足以改变标题的外观吗？

标签： angular typescript angular6

【解决方案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>

【讨论】：

【解决方案2】：

你尝试过这样的事情吗？

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

【讨论】：