时间戳

首页 > 解决方案 > 以角度动态切换模板html，scss

angular - 以角度动态切换模板html，scss

问题描述

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

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

标签： angulartypescriptangular6

解决方案

你有没有尝试过这样的事情？ 

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

推荐阅读