Angular 2 – 页面加载时的许多历史条目
发布时间:2020-12-17 07:00:30 所属栏目:安全 来源:网络整理
导读:当我在新的浏览器窗口中打开我的Angular 2应用程序时,我在浏览器页面历史记录中获得了10个条目.这发生在路由器中列出的任何页面上,没有指定页面(即 http://localhost:8080或 http://localhost:8080/survey等) const routes: Routes = [ {path: 'survey',comp
当我在新的浏览器窗口中打开我的Angular 2应用程序时,我在浏览器页面历史记录中获得了10个条目.这发生在路由器中列出的任何页面上,没有指定页面(即
http://localhost:8080或
http://localhost:8080/survey等)
const routes: Routes = [ {path: 'survey',component: SurveyComponent,canActivate: [AuthGuard]},{path: 'survey/:id',{path: '',component: HomeComponent},{path: 'about',component: AboutComponent},{path: 'terms',component: TermsAndConditionsComponent},{path: 'map',component: MapComponent},{path: 'what-next',component: WhatNextComponent},{path: 'contact',component: ContactComponent},{path: '**',redirectTo: '',pathMatch: 'full'},]; 我正在使用路由器3.1.2 "@angular/router": "3.1.2", 我从去年3月开始发现similar question,但答案声称已经在Angular的代码中解决了. 更新 import {Injectable} from '@angular/core'; import {AuthenticationService} from '../_services/index'; import {LoginModalService} from "../login_modal/login_modal.service"; import { Router,CanActivate,ActivatedRouteSnapshot,RouterStateSnapshot} from '@angular/router'; import {Observable} from 'rxjs/Observable'; @Injectable() export class AuthGuard implements CanActivate { constructor(private authentication: AuthenticationService,private loginModalService: LoginModalService) { } canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot) { if (this.authentication.isAuthenticated()) { return Observable.of(true); } else { this.loginModalService.toggleVisable(state.url); return Observable.of(false); } } } 解决方法
我有类似的情况,我通过延迟加载路线解决它
也就是说,您可以将路径分离到主要路径加载中的不同模块路由广告,例如thi 在主要路线 { path: 'dashboard',component: DashboardComponent,},{ path: 'user',loadChildren: 'app/user/user.module#UserModule',//in user module }, 所以在你的用户模块中 @NgModule ( { imports: [ userRoutingModule //contains my user module routes ],} ) export class UserModule { } 用户路由模块有 const userRoutes: Routes = [ { path: '',component: UserComponent},]; @NgModule({ imports: [ RouterModule.forChild(userRoutes) ],exports: [RouterModule],providers: [] }) export class userRoutingModule { } 这是我如何解决我的问题,我希望这有帮助. 注意:记住import.forRoot的主要路线 在这种情况下,请确保在根模块中(您可以在app模块中导入用户模块) @NgModule({ declarations: [ ],imports: [ UserModule,//in your case maybe use survey module ],}) export class AppModule {} //this is in my root module (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- node.js – npm package.json和docker(挂载……)
- scala – Play框架:依赖注入Action Builder
- Bootstrap 3 – 按钮高度匹配面板(CSS3)
- angular4 – 创建一个也可以在视图中访问的全局变量
- Angular 2模态弹出错误“表达式在检查后发生了变化”
- amazon-web-services – Amazon AWS ECS Docker端口无法正
- 使用CXF开发RestFul WebService问题解决方案
- 过滤器 – 在角度2中,如何显示一个数字作为二进制小数四舍五
- Bootstrap3基础到实战-宁皓
- angularjs – Angular-UI typeahead:显示标签,但绑定到值