Angular2 - Изменение глобального стиля index.html или применение styleurl к маршруту

Question

Я использую стили из bootswatch (файл CSS для замены файла CSS для начальной загрузки), и я хочу использовать другой для каждого маршрута на мое приложение (например, панель управления) означает, что мне нужен другой файл CSS, который будет применяться глобально при активации определенного маршрута. Я попытался удалить ссылку CSS из index.html и поместить ее в StyleUrls основного компонента, подобного этому (фиктивный пример одной из ветвей моего веб-сайта):

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

Итак, есть ли способ сделать стильUrls унаследованным дочерним компонентам? или я могу изменить ссылку CSS index.html программно?

спасибо.

Answer 1

Ну, раствор, как было предложено @ Гюнтер Zöchbauer (спасибо)
это сделать функцию JS в 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') 
    } 

} 

надеюсь, что это будет полезно для кого-то.