Angular 中的组件中断样式

如何解决Angular 中的组件中断样式

我是 Angular 的新手，我正在从事我以前的项目，以将 .net 转换为 angular

但是这个问题与 Angular 完全相关，如果它是一个愚蠢的问题，请原谅我。

我正在尝试在两个页面（组件）之间导航，但我的样式被破坏了

从某种意义上说，我的 convertimageComponent 上有一个 bootstrap 滑块

现在，当我尝试从 homeComponent 导航到 convertimageComponent 时，滑块显示为 Input，当我刷新页面时，滑块显示完美。

谁能告诉我我哪里出错了或者处理这个问题的正确流程是什么。

不仅如此，对于每个 jquery 插件，我都有同样的问题。

下面是我的代码：

我已经添加了 angular.json 文件中显示的样式和脚本

"styles": [
"src/assets/css/progressive-image.css","src/assets/css/bootstrap-slider.css"
],"scripts": [
"node_modules/jquery/dist/jquery.min.js","node_modules/bootstrap/dist/js/bootstrap.min.js","node_modules/popper.js/dist/umd/popper.min.js","src/assets/js/progressive-image.min.js","src/assets/js/bootstrap-slider.min.js"
]

home.component.html

 <a routerLink="/convertimage">
    <img src="../../assets/img/loading.png?tr=h-1,w-1:w-512,h-512" width="512" height="512"
    data-src="../../assets/img/apps/app1.png?tr=w-512,h-512"
    class="preview img-fluid lazy mx-auto d-block" alt="" />
    <h3 class="appname">App1<i class="fas fa-arrow-right"></i></h3>
 </a>

convertimage.component.html

<div class="row mt-3">
    <div class="col-sm-12 col-xl-3">
     <h5>Image Quality :</h5>
    </div>
    <div class="col-sm-12 col-xl-6">
    <input id="imgQuality" data-slider-id='ex1Slider' type="text"
    name="imgQualitySlider" data-provide="slider"
    data-slider-min="0" data-slider-max="100" data-slider-step="1"
    data-slider-value="50" data-slider-tooltip="always">
    </div>
</div>

homecomponent.ts

import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'app-home',templateUrl: './home.component.html',styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

convertimagecomponent.ts

import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'app-convertimage',templateUrl: './convertimage.component.html',styleUrls: ['./convertimage.component.css']
})
export class convertimageComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
}

这是我的 app-routing.ts 文件

import { NgModule } from '@angular/core';
import { RouterModule,Routes } from '@angular/router';
import { convertimageComponent } from './convertimage/convertimage.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  {path: '',redirectTo: 'home',pathMatch: 'full'},{path:'home',component:HomeComponent },{path :'convertimage',component:convertimageComponent }
];

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

我尝试过的：

@NgModule({
  imports: [RouterModule.forRoot(routes,{onSameUrlNavigation: 'reload'})],exports: [RouterModule]
})

这没有用

{path :'convertimage',component:convertimageComponent,runGuardsAndResolvers: 'always' }

输出：

第一次路由到convertimage组件之前

手动刷新整个页面后

解决方法

我认为您可能会遇到竞争条件。假设刷新页面后，整个 JavaScript 已经在浏览器缓存中，因此执行每个加载的脚本之间的时间更短。然后，要渲染的滑块已经/更早出现，并且它通过插件本身进行“自我解决”滑块注册。结果就是您最初的预期。

为了防止这种最初的非渲染行为，您应该自己负责渲染。因此，我建议您在确定已呈现滑块元素后注册滑块。

// You need to import jQuery here as well
import * as $ from 'jquery/dist/jquery.min.js';


import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'app-convertImage',templateUrl: './convertImage.component.html',styleUrls: ['./convertImage.component.css']
})
export class convertImageComponent implements OnInit,AfterViewInit {

  private slider:any;

  constructor() { }

  ngOnInit(): void {
  }

  ngAfterViewInit():void {
   // You're loading jQuery with bootstrap so this way is suitable
   // Natively I would recommend template vars (#imgQuality) and 
   // @ViewChild()decorator
   this.slider = $('#imgQuality').slider({});  
  }
}