时间戳

首页 > 解决方案 > Angular 页面在路由到不同页面时破坏 CSS 布局和 JS 功能 [Angular：12.1.2]

jquery - Angular 页面在路由到不同页面时破坏 CSS 布局和 JS 功能 [Angular：12.1.2]

问题描述

我目前正在学习如何在我整理的多页 Angular 网站上进行路由。我在线获得了一个 HTML 模板来实现这个演示（https://turu-travels.netlify.app/）。它的路由很好，我对进展感到满意。然而，当路由到不同的页面（即从主页到旅游）时分页符，我面临着一些挑战。页面布局中断，似乎没有任何工作，例如主页幻灯片不再工作，不能再切换暗/亮模式，部分甚至在主页上消失。我怀疑某些 CSS/JS 正在部分加载，但不是全部加载。网站恢复正常的唯一一次是当我单击网站上未定义的链接时，该链接将我带回主页。我没有在每个链接上放置路由器链接，因为它只是为了练习。我在网上搜索了解决方案，但无济于事。似乎没有人记录过这个问题。我在控制台上也没有收到任何警告。所以我无法调试可能是什么问题。结构）：

-src
--app
---components
----home
----blog
----tours
----hotels
----contact
----categories
----featured
--assets
---css
---js
---img
---video

src/index.html（模板附带 9 个不同的 JS 文件 + jQuery CDN）

<!doctype html>
<html lang="en">
<head>
  <base href="/">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body>
  
  <app-root></app-root>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="./assets/js/jquery-ui.min.js"></script>
  <script src="./assets/js/checkmode.js"></script>
  <script src="./assets/js/slick.min.js"></script>
  <script src="./assets/js/jquery.arcticmodal.min.js"></script>
  <script src="./assets/js/lightgallery.js"></script>
  <script src="./assets/js/jquery.mousewheel.min.js"></script>
  <script src="./assets/js/device.min.js"></script>
  <script src="./assets/js/jquery.placeholder.label.js"></script>
  <script src="./assets/js/scripts.js"></script>
</body>
</html>

src/angular.json

"assets": [
  "src/favicon.ico",
  "src/assets"
],
 "styles": [
  "src/styles.css"
],
 "scripts": []

src/styles.css（从 ./assets/css 导入。模板带有 42 个单独的 CSS 文件）

@import "./assets/css/slick.css";
@import "./assets/css/lg-transitions.min.css";
@import "./assets/css/lightgallery.min.css";
@import "./assets/css/jquery.arcticmodal.css";
@import "./assets/css/variables.css";
@import "./assets/css/general.css";
@import "./assets/css/buttons.css";
@import "./assets/css/inputs.css";
@import "./assets/css/arrows.css";
@import "./assets/css/socials.css";
@import "./assets/css/top-panel.css";
@import "./assets/css/search-section.css";
@import "./assets/css/posts-section.css";
@import "./assets/css/instagram-section.css";
@import "./assets/css/subscribe-section.css";
@import "./assets/css/footer.css";
@import "./assets/css/single.css";
@import "./assets/css/comments.css";
@import "./assets/css/sliders.css";
@import "./assets/css/wp-content.css";
@import "./assets/css/accordion.css";
@import "./assets/css/video.css";
@import "./assets/css/gallery.css";
@import "./assets/css/sidebar.css";
@import "./assets/css/archive.css";
@import "./assets/css/pagination.css";
@import "./assets/css/contact-page.css";
@import "./assets/css/author.css";
@import "./assets/css/contacts.css";
@import "./assets/css/search-results.css";
@import "./assets/css/share.css";
@import "./assets/css/profile.css";
@import "./assets/css/modals.css";
@import "./assets/css/screen-with-search.css";
@import "./assets/css/sliders-sections.css";
@import "./assets/css/packages.css";
@import "./assets/css/collection.css";
@import "./assets/css/banner-section.css";
@import "./assets/css/faq-section.css";
@import "./assets/css/filters.css";
@import "./assets/css/rating.css";
@import "./assets/css/calendar.css";

app.component.html

<router-outlet></router-outlet>

每一个页面（pagename.component.html）分为：

<header>
    <title></title>
</header>
<body></body>

app.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './components/home/home.component';
import { ToursComponent } from './components/tours/tours.component';
import { HotelsComponent } from './components/hotels/hotels.component';
import { ContactComponent } from './components/contact/contact.component';
import { FavouritesComponent } from './components/favourites/favourites.component';
import { BlogComponent } from './components/blog/blog.component';
import { TourDetailsComponent } from './components/tour-details/tour-details.component';
import { HotelDetailsComponent } from './components/hotel-details/hotel-details.component';
import { CategoriesComponent } from './components/categories/categories.component';
import { BlogDetailsComponent } from './components/blog-details/blog-details.component';

const routes: Routes = [
  {path: 'home', component: HomeComponent},
  {path: 'blog', component: BlogComponent},
  {path: 'blog/blog-details', component: BlogDetailsComponent},
  {path: 'categories', component: CategoriesComponent},
  {path: 'contact-us', component: ContactComponent},
  {path: 'hotels', component: HotelsComponent},
  {path: 'hotels/hotel-details', component: HotelDetailsComponent},
  {path: 'tours', component: ToursComponent},
  {path: 'tours/tour-details', component: TourDetailsComponent},
  {path: 'featured', component: FavouritesComponent},
  {path: '**', component: HomeComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [
  HomeComponent,
  BlogComponent,
  BlogDetailsComponent,
  CategoriesComponent,
  ContactComponent,
  HotelsComponent,
  ToursComponent,
  FavouritesComponent,
  HotelDetailsComponent,
  TourDetailsComponent
]

最后是我的 app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule , routingComponents } from './app-routing.module';
import { AppComponent } from './app.component';

import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [
    AppComponent,
    routingComponents,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的组件没有单独的 CSS 文件，所有的 CSS 都是从 angular.json 提供的，而 JS 文件是从 src/index.html 提供的。我尝试通过 angular.json 添加 JS，但没有成功。任何帮助将不胜感激。

标签： jquerycssangularangular-routingangular-router

解决方案

推荐阅读