如何在angular2中使用多主题？

场景：

作为Angular 2的初学者，我正在创建一个具有两个不同领域的应用程序

• 行政及
• 顾客
  对于这两个领域，我想使用两个不同的主题
  例如，管理区为“管理LTE”，客户区为一个自定义主题

问题：

• 如何使用angular-cli.json处理不同的css和js
• 如何在index.html中使用它们

---

您可以在应用程序中创建两个组件。通过angular@cli像这样：

ng g c customers
ng g c admin

installing component
  create src\app\customers\customers.component.css
  create src\app\customers\customers.component.html
  create src\app\customers\customers.component.spec.ts
  create src\app\customers\customers.component.ts
  update src\app\app.module.ts

现在，每个将创建如下4个文件：

ng g c customers
ng g c admin

installing component
  create src\app\customers\customers.component.css
  create src\app\customers\customers.component.html
  create src\app\customers\customers.component.spec.ts
  create src\app\customers\customers.component.ts
  update src\app\app.module.ts

及

现在，每个组件/部分都有自己的css文件，您可以使用它创建自己的自定义主题，即

customers.component.css

和

admin.component.css

也可以通过在google上搜索来获得更多关于ShadowDOM的信息

奖金： 类型

或

---

这不会创建仅用于测试目的的.spec.ts文件。

您可以在应用程序中创建两个组件。通过angular@cli像这样：

ng g c customers
ng g c admin

installing component
  create src\app\customers\customers.component.css
  create src\app\customers\customers.component.html
  create src\app\customers\customers.component.spec.ts
  create src\app\customers\customers.component.ts
  update src\app\app.module.ts

现在，每个将创建如下4个文件：

ng g c customers
ng g c admin

installing component
  create src\app\customers\customers.component.css
  create src\app\customers\customers.component.html
  create src\app\customers\customers.component.spec.ts
  create src\app\customers\customers.component.ts
  update src\app\app.module.ts

及

现在，每个组件/部分都有自己的css文件，您可以使用它创建自己的自定义主题，即

customers.component.css

和

admin.component.css

也可以通过在google上搜索来获得更多关于ShadowDOM的信息

奖金： 类型

或

---

这不会创建仅用于测试目的的.spec.ts文件。

对于我的学习目的博客项目，我也有同样的问题。 我对管理员/用户有不同的主题。我找到了解决我问题的办法

从'@angular/platform browser'导入{DOCUMENT}；

我是这样用的

index.html

在

index.html

blog.component.ts

从'@angular/core'导入{Component，Inject，OnInit}；
从“@angular/platform browser”导入{DOCUMENT}；
从'@angular/router'导入{ActivatedRoute}；
从“../services”导入{ProgressbarService，PostService，TitleService}；
从“../models”导入{Post，User，Comment}；
@组成部分({
选择器：“应用程序主页”，
templateUrl:'./blog.component.html'，
样式URL:['./blog.component.css']
})
导出类BlogComponent实现OnInit{
构造函数（@Inject（DOCUMENT）private DOCUMENT）{}
//如果用户从管理员切换到博客，则需要更新主题css。
恩戈尼尼特（）{
this.document.getElementById（'主题'）
.setAttribute（'href'，'./assets/css/clean blog.css'）；
}
}

admin.component.ts

从'@angular/core'导入{Component，OnInit，Inject}；
从'@angular/Router'导入{Router}；
从“@angular/platform browser”导入{DOCUMENT}；
@组成部分({
templateUrl:'admin.component.html'
})
导出类AdminComponent实现OnInit{
用户：任何；
构造函数（@Inject（DOCUMENT）私有文档）{
}
恩戈尼尼特（）{
this.document.getElementById（'theme'）.setAttribute（'href'，'./assets/css/main.css'）；
}
}

---

希望这能对你有所帮助。

对于我的学习目的博客项目，我也有同样的问题。 我对管理员/用户有不同的主题。我找到了解决我问题的办法

从'@angular/platform browser'导入{DOCUMENT}；

我是这样用的

index.html

在

index.html

blog.component.ts

从'@angular/core'导入{Component，Inject，OnInit}；
从“@angular/platform browser”导入{DOCUMENT}；
从'@angular/router'导入{ActivatedRoute}；
从“../services”导入{ProgressbarService，PostService，TitleService}；
从“../models”导入{Post，User，Comment}；
@组成部分({
选择器：“应用程序主页”，
templateUrl:'./blog.component.html'，
样式URL:['./blog.component.css']
})
导出类BlogComponent实现OnInit{
构造函数（@Inject（DOCUMENT）private DOCUMENT）{}
//如果用户从管理员切换到博客，则需要更新主题css。
恩戈尼尼特（）{
this.document.getElementById（'主题'）
.setAttribute（'href'，'./assets/css/clean blog.css'）；
}
}

admin.component.ts

从'@angular/core'导入{Component，OnInit，Inject}；
从'@angular/Router'导入{Router}；
从“@angular/platform browser”导入{DOCUMENT}；
@组成部分({
templateUrl:'admin.component.html'
})
导出类AdminComponent实现OnInit{
用户：任何；
构造函数（@Inject（DOCUMENT）私有文档）{
}
恩戈尼尼特（）{
this.document.getElementById（'theme'）.setAttribute（'href'，'./assets/css/main.css'）；
}
}

---

希望这能对您有所帮助。

如果我想从node_模块添加多个js文件怎么办？如果您可以通过id获取任何元素，那么您也可以使用DOCUMENT在DOM中创建元素。我没有试过，但是你可以试着在运行时添加js。这有一个问题，当编译AdminComponent时，在索引、html呈现之前。因此，如果修改html并添加或删除标记之类的内容，将不会产生任何效果，那么我们如何修复它。如果我想从node_模块添加多个js文件，该怎么办？如果您可以通过id获取任何元素，那么您也可以使用DOCUMENT在DOM中创建元素。我没有试过，但是你可以试着在运行时添加js。这有一个问题，当编译AdminComponent时，在索引、html呈现之前。因此，如果修改html并添加或删除标记之类的内容，将不会产生任何效果，那么我们如何修复它呢。