问题描述
我是 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({});
}
}