Angular 8多布局为每个布局使用不同的css和js_Angular_Angular8

Angular 8多布局为每个布局使用不同的css和js

angular

Angular 8多布局为每个布局使用不同的css和js,angular,angular8,Angular,Angular8,我在一个应用程序，其中包括前端网站布局和后端管理布局工作。这两种布局具有不同的CSS和JS。如何根据每个布局模板使用不同的CSS和Js。这是我的结构 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Couaff</title> <base href="/"> <meta name="viewport"

我在一个应用程序，其中包括前端网站布局和后端管理布局工作。这两种布局具有不同的CSS和JS。如何根据每个布局模板使用不同的CSS和Js。这是我的结构

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Couaff</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

 <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!--[if lte IE 8]>
        <script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
    <![endif]-->

    <!-- **Favicon** -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

    <!-- **CSS - stylesheets** -->
    <link id="default-css" href="assets/style.css" rel="stylesheet" media="all">
    <link href="assets/css/shortcode.css" rel="stylesheet" type="text/css">

    <!-- **Additional - stylesheets** -->
    <link rel="stylesheet" href="assets/css/responsive.css" type="text/css" media="all">
    <link href="assets/css/animations.css" rel="stylesheet" media="all">
    <link id="skin-css" href="assets/skins/red/style.css" rel="stylesheet" media="all">
    <link rel="stylesheet" href="assets/css/meanmenu.css" type="text/css" media="all">
    <link rel="stylesheet" type="text/css" href="assets/css/pace-theme-loading-bar.css">

    <!-- **Font Awesome** -->
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">

    <!-- **Google - Fonts** -->
    <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,500,300,700,900' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>

    <!--[if IE 7]>
    <link rel="stylesheet" href="css/font-awesome-ie7.min.css" />
    <![endif]-->

    <!-- jQuery -->
    <script src="assets/js/modernizr.custom.js"></script>

</head>
<body>
  <app-root></app-root>


  <!-- **jQuery** -->
<script src="assets/js/jquery-1.11.3.min.js"></script>
<script src="assets/js/jquery.parallax-1.1.3.js" type="text/javascript"></script>
<script type="text/javascript" src="assets/js/jquery.sticky.min.js"></script>
<script src="assets/js/jquery.inview.js" type="text/javascript"></script>
<script src="assets/js/jsplugins.js" type="text/javascript"></script>
<script src="assets/js/jquery.meanmenu.min.js" type="text/javascript"></script>
<script src="assets/js/custom.js"></script>

</body>
</html>

我的重点是为我创建的每个布局加载不同的样式表和js文件。这是两个布局

注意：我不想在一个应用程序中使用多个应用程序应用程序

您可以使用路由选择要在特定url上使用的布局。您的布局应使用

你可以检查一下。如果这还不够，您可能需要创建延迟加载的模块来分离每个视图加载的内容。

对于每个模块l，我将尝试使用@import将css文件导入scss文件，并将其指向我希望使用的css，同样，对于jquery，我将其作为component.ts文件导入。查看进一步解释

谢谢您的回答，请查看更新问题。我的问题是为这两种不同的布局加载不同的样式表和js文件。因为我有不同的css和js文件用于前端站点布局，不同的css和文件用于管理站点布局。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SiteLayoutComponent } from './layouts/site-layout/site-layout.component';
import { HomeComponentComponent } from './other-component/home-component/home-component.component';
import {DashboardComponent} from './secure-component/dashboard/dashboard.component';
import {AdminLayoutComponent} from './layouts/admin-layout/admin-layout.component';

const routes: Routes = [
  {path: '', redirectTo: '/home', pathMatch: 'full'},
    {
      path: '', component : SiteLayoutComponent,
        children: [
          {path: 'home', component: HomeComponentComponent}
        ]
    },
    {
      path: '', component : AdminLayoutComponent,
        children: [
          {path: 'dashboard', component: DashboardComponent}

        ]
    }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

const routes: Routes = [
  {
    path: 'a',
    component: LayoutAComponent,
    children: [{ path: '', component: ContentComponent },]
  },
  {
    path: 'b',
    component: LayoutBComponent,
    children: [{ path: '', component: ContentComponent },]
  },
]