时间戳

首页 > 解决方案 > Angular 8 Multiple layout 对每个布局使用不同的 css 和 js

angular - Angular 8 Multiple layout 对每个布局使用不同的 css 和 js

问题描述

我正在开发一个应用程序，其中包括前端站点布局和后端管理布局。这两种布局都有不同的 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>

我的 app.routing.ts 由以下代码组成。

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 { }

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

应用结构

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

标签： angularangular8

解决方案

您可以使用路由来选择要在特定 url 上使用的布局。你的布局应该使用<router-outlet></router-outlet>

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

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

推荐阅读