Angular2-更改index.html的全局样式，或将styleurl应用于路线 [英] Angular2 - Changing the global style of index.html, or applying styleurl to a route

问题描述

我正在使用bootswatch中的样式((用CSS文件替换bootstrap的CSS文件)，并且我想对我的应用程序中的每条路线使用不同的样式(例如控制面板) 表示当激活特定路由时，我需要在全局范围内应用另一个CSS文件 我尝试从index.html删除CSS链接，并将其放在这样的主要组件的StyleUrls中(我的网站分支之一的虚拟示例):

I'm using styles from bootswatch, (CSS file to replace bootstrap's CSS file) and I want to use a different one for a each route on my app (the control panel for example) means I need a different CSS file to be applied globally when a specific route is activated I tried removing the CSS link from index.html and putting it in StyleUrls of the primary component like this (dummy example of one of my website's branches):

import { Component } from '@angular/core'
import { ROUTER_DIRECTIVES, Router } from '@angular/router'

@Component({
    moduleId: module.id,
    styleUrls: ['../../../assets/css/bootstrap-simplex.css'],
    template: '<navbar></navbar><router-outlet></router-outlet>' ,
    directives: [ROUTER_DIRECTIVES]
})
export class AdministrationComponent {
    constructor(public router: Router){}

}

现在，这确实会更改此组件元素的样式，但不会更改其router-outlet

Now this does change the style of this component's elements, but not to the childs or components inside its router-outlet

有没有办法使styleUrls继承到子组件?还是可以通过编程方式更改index.html的CSS链接?

So is there a way to make styleUrls inherited to child components? or can I change the CSS link of index.html programatically?

谢谢.

推荐答案

好吧，该解决方案是@GünterZöchbauer建议的(谢谢)
是在index.html中创建一个js函数，然后从这样的组件中调用它:

Well, the solution was as suggested by @Günter Zöchbauer (thank you)
is to make a js function in index.html then calling it from the component like this:

index.html

index.html

<link id="globalTheme" href="libs/bootstrap.min.css" rel="stylesheet">
<script>
    var file;
    function changeTheme(section) {
        switch (section) {
            case 'primary':
                file = '-flatly';
                break;
            case 'administration':
                file = '-lumen';
                break;
        }
        document.getElementById("globalTheme").setAttribute("href",'libs/bootstrap' + file + '.min.css');
    }
</script>

然后在组件中

import { Component } from '@angular/core'
import { ROUTER_DIRECTIVES, Router } from '@angular/router'

declare var changeTheme: any

@Component({
    moduleId: module.id,
    templateUrl: '../templates/administration.template.html',
    directives: [ROUTER_DIRECTIVES]
})
export class AdministrationComponent{
    constructor(public router: Router){
        changeTheme('administration')
    }

}

希望这对某人有用.

这篇关于Angular2-更改index.html的全局样式，或将styleurl应用于路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！