我在我的应用程序中使用UI路由器来嵌套视图,但同时我想在路由更改时监听事件.在使用UI路由器之前,routeChangeSuccess正好点火但是在ui-router之后它不会触发.文档建议使用viewContedLoaded或stateChangeSuccess,但即使他们不被解雇.我正在粘贴我的代码片段.任何帮助,将不胜感激.

var app = angular.module('SmartKart', ['ngCookies','ngRoute','ui.bootstrap','angularPayments','ngAnimate','toaster','ui.router','LocalStorageModule']);
app.config(['$routeProvider','$httpProvider','$urlRouterProvider', '$stateProvider',  function($routeProvider, $httpProvider,$urlRouterProvider,$stateProvider) {
$routeProvider
//TODO: Clean-up...most of these routes can be eliminated since we are now using nested views inside main.html. should probably use .otherwise(... main.html) or something
  .when('/postal',
  {
    templateUrl: 'static/partials/landingPage.html',
    requireLogin: false
  })
  .when('/register',
  {
    templateUrl:'static/partials/landingPage.html',
    requireLogin: false
  })
  .when('/login',
  {
    templateUrl:'static/partials/landingPage.html',
    requireLogin: false
  })
  .when('/forgot',
  {
    templateUrl:'static/partials/landingPage.html',
    requireLogin: false
  })
  //TODO: Clean-up...most of these routes can be eliminated since we are now using nested views inside main.html
  .when('/noregister',
  { …

我在我的 Angular 4 应用程序中使用路由保护，如果条件满足并返回 true，我想向路由添加一个查询参数。

这是我一直在研究的代码

@Injectable()
export class ViewGuardService implements CanActivate {

  constructor(private router: Router) { }

  canActivate(activatedRoute: ActivatedRouteSnapshot, snapshot: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if(!this.router.url.includes('/order-management')) {
      //ADD PARAMS TO ROUTE OR PASS DATA TO COMPONENT HERE AND THEN RETURN TRUE
       return true;
    } else {
       this.route.navigate['/login'];
       return false;
    }
  }
}

通常，要导航到带有参数的路线，我们可以将其用作this.router.navigate(['/order-management', activatedRoute.url[0].path], { queryParams: { moveToOrders: true }});. 但如果我在if条件中使用这个条件，就会导致函数调用的无限循环。

那么如何将参数或数据从守卫传递到组件呢？请帮我解决这个问题。

我正在尝试为路由器插座命名，但它不起作用。

这是完美运行的基本路由：

路由模块

@NgModule({
  imports: [
    RouterModule.forChild([
      {
        path: 'admin',
        component: AdminComponent,
        children: [
          {
            path: '',
            redirectTo: 'dashboard1',
            pathMatch: 'full'
          },
          {
            path: 'dashboard1',
            component: AdminDashboard1Component
          },
          {
            path: 'dashboard2',
            component: AdminDashboard2Component
          }
        ]
      }
    ])
  ],
  exports: [
    RouterModule
  ]
})
export class AdminRoutingModule { }

组件 html

<div class="wrapper">

  <app-admin-header></app-admin-header>
  <!-- Left side column. contains the logo and sidebar -->
  <app-admin-left-side></app-admin-left-side>

  <!-- Content Wrapper. Contains page content -->
  <router-outlet></router-outlet>

  <!-- /.content-wrapper -->
  <app-admin-footer></app-admin-footer>

  <!-- Control Sidebar --> …

我有一个 angular 4 应用程序。我使用 JWT 令牌进行身份验证。一切正常。但是我给 JWT 令牌的令牌过期时间是 1 小时。一旦令牌在服务器端过期，我想从前端应用程序中注销用户。在节点后端，我使用快速中间件通过检查所有请求是否包含有效令牌来处理此问题。有没有办法做这个有角度的一面？

我需要修改当前路线的数据对象中的面包屑值。这是我的路线配置。

      {
    path: "users",
    component: UserListComponent,
    children: [
      {
        path: ":id",
        component: UserComponent,
        data: {
          breadcrumb: '<User name here>'
        },
       }
    ],
    data: {
      breadcrumb: 'Users'
    }
  },

我正在尝试这样做：

        this._route.data = { breadcrumb: this.user.displayName }; //_route is ActivatedRoute

但它不起作用。任何帮助，将不胜感激。谢谢。

我正在使用 Angular 6，但我在更改路线时遇到了问题。如果我使用 routerLink 或 navigate() 方法浏览应用程序，它会正常工作，因为它只加载新模块（如有必要）。但是，例如，如果我在此链接中：localhost:8080/home，我单击 URL，取消“主页”，输入“配置文件”并按 Enter，它正确进入配置文件页面，但应用程序已重新加载（也是应用程序组件）。为什么？我想不通。这是我的路由：

const appRoutes: Routes = [
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

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

也许问题出在 auth-guard 上？

@Injectable()
export class AuthGuard implements CanActivate {

constructor(private store: …

我正在尝试CanDeactivate在路由中使用该函数，但canDeactivate在另一条路由上调用时从未调用该函数。

CanDeactivateGuard :

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs/Observable';

export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable()
export class CanDeactivateGuard implements  CanDeactivate<CanComponentDeactivate>{

  canDeactivate(component: CanComponentDeactivate) {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

目录视图组件：

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from "rxjs";
import {CanComponentDeactivate} from '../../can-deactivate.guard';
@Component({
  selector: …

除了应用程序根目录的导航之外，我还尝试向组件添加导航，但它没有导航到组件路由。

我正在使用两个路由器插座：

• 应用程序根的路由器出口（app.component.html）
• 用户组件的路由器插座（users.component.html）

有两条路线：

• 应用程序的路由（app.routing.module.ts）
• 用户路由（users.routing.module.ts）

当导航到“用户”我可以看到users.component.html有两个链接，但链接“当按下列表”，它没有导航到：UsersListComponent定义users.routing.module.ts

我不确定这是否是正确的方法。

下面是项目和源代码的文件夹结构：

-- app.routing.module.ts
-- app.component.html
-- components
   -- dashboard
   -- users
      -- users.component.html
      -- users.module.ts
      -- users.routing.module.ts

app.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UsersModule } from './panels/users/users.module';

const AppRouting: Routes = [
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: 'dashboard', component: DashboardComponent },
    { path: 'users', loadChildren: () => …

我正在编写一个使用Keycloak 7.0.0进行用户身份验证和授权的Angular 8应用程序。