Question

情景：

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

管理员和
客户。

对于这两个领域，我想使用两个不同的主题。

E.g。＆＃34;管理LTE＆＃34;对于管理区域和一个客户区域的自定义主题。

问题：

如何使用angular-cli.json
如何在index.html中使用它们？

Answer 1

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

import { DOCUMENT } from '@angular/platform-browser';

我用这个如下。

的index.html

<link id="theme" rel="stylesheet" href="assets/css/clean-blog.css">

在index.html

中的上一行添加

blog.component.ts

import { Component, Inject, OnInit } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router';

import { ProgressbarService, PostService, TitleService } from '../services';
import { Post, User, Comment } from '../models';

@Component({
  selector: 'app-home',
  templateUrl: './blog.component.html',
  styleUrls: ['./blog.component.css']
})
export class BlogComponent implements OnInit {

  constructor(@Inject(DOCUMENT) private document){ }
  // if user switch from admin to blog need to update theme css.
  ngOnInit() {
    this.document.getElementById('theme')
      .setAttribute('href', './assets/css/clean-blog.css');
  }

}

admin.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { Router } from '@angular/router';
import { DOCUMENT } from '@angular/platform-browser';

@Component({
  templateUrl: 'admin.component.html'
})
export class AdminComponent implements OnInit {
  user: any;
  constructor(@Inject(DOCUMENT) private document) {

  }

  ngOnInit() {
    this.document.getElementById('theme').setAttribute('href', './assets/css/main.css');
  }
}

希望这会对你有所帮助。

Answer 2

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

ng g c customers
ng g c admin

现在每个人都会创建4个这样的文件：

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

和

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

现在每个组件/部分都有自己的css文件，您可以使用它创建自己的自定义主题i：e customers.component.css和admin.component.css

还可以通过在Google上搜索获取有关相同

的更多信息来阅读有关shadow DOM的信息

加成：型

ng g c customers --spec false

或

ng g c admin --spec false

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

如何在angular2中使用多个主题？

2 个答案:

的index.html

blog.component.ts

admin.component.ts