html - 一个应用程序的两种不同样式 angular 6

Question

这已经是重复的问题，但我已经尝试了其中一种工作的所有方法，但似乎不是一个好方法我想要两个不同的样式表和不同的脚本，第一个用于用户页面，另一个带有管理面板，每个都有它是自己的样式和脚本和图像我如何区分这些不同的样式我必须使用 ids 在 index.html 中添加主要样式，然后在页面布局中加深更改 ids 值，但这似乎不是一个好方法，因为我有多个控制台中的错误，用户的未知链接以及管理员的案例和虎钳我的试验是这是我的头

 <!--custom css-->
 <link id="Usertheme" rel="stylesheet" href="">
 <!--Bootstrap css-->
 <link id="Userbootstrap" rel="stylesheet" href="">
 <!--Magnific popup css-->
 <link id="Userpopup" rel="stylesheet" href="">
 <!--Themify icon css-->
  <link id="Usericons" rel="stylesheet" href="">
 <!--animated css-->
 <link id="Useranimate" rel="stylesheet" href="">
 <!--ytplayer css-->
 <link id="UserYTPlayer" rel="stylesheet" href="">
 <!--Owl carousel css-->
 <link id="Usercarousel"  rel="stylesheet" href="">
 <link id="Userdefault" rel="stylesheet" href="">
 <!--responsive css-->
 <link id="Userresponsive" rel="stylesheet" href="">

 <!--admin-->
    <link id="adminapp" href="" rel="stylesheet">
    <link id="adminmaterialize" href="" rel="stylesheet">
    <!-- Theme style. You can choose a theme from css/themes instead of get all themes -->
    <link id="adminalltheme" href="" rel="stylesheet" />

在管理页面 ts

  constructor(@Inject(DOCUMENT) private document, private router: Router, private service: UserService) { }

  ngOnInit() {
    this.document.getElementById('Usertheme').setAttribute('href', './assets/css/adminstyle.css');
    this.document.getElementById('adminapp').setAttribute('href', './assets/css/app.min.css');
    this.document.getElementById('adminmaterialize').setAttribute('href', './assets/js/bundles/materialize-rtl/materialize-rtl.min.css');
    this.document.getElementById('adminalltheme').setAttribute('href', './assets/css/styles/all-themes.css');

    this.service.getUserProfile().subscribe(
      res => {
        this.userDetails = res;
      },
      err => {
        console.log(err);
      },
    );
  }

在用户页面中我更改了链接

用两种不同的样式处理这部分的最佳方法是什么

标签： htmlcssangulartypescript