标签: angular-router

我正在为我的项目做面包屑。我这里有两个问题：

1. 当我来自其同级页面时，未生成面包屑
2. 页面刷新时未生成面包屑

两者该如何解决呢？

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, RoutesRecognized, NavigationStart,  NavigationEnd, Params, PRIMARY_OUTLET } from '@angular/router';
import { filter, map } from 'rxjs/operators';
import { BreadCrumbsService } from './../../services/bread-crumbs.service';


@Component({
    selector: 'bread-crumbs',
    templateUrl: './bread-crumbs.component.html',
    styleUrls: ['./bread-crumbs.component.scss']
})
export class BreadCrumbsComponent implements OnInit {

    breadcrumbList: Array<any> = [];

    /**
        * Setting Breadcrumb object, where name for display, path for url match,
        link for heref value, getting datas from BreadCrumbsService service
    */

    constructor(private router: Router, …

在 Angular 工作了一段时间后，我意识到我们在路由的数据订阅者中没有设置任何数据类型。因此，例如，使用以下路由配置：

{
  path: '',
  data: {
    name: 'Bob' // type: string
  },
  resolve: {
    cars: CarsResolver // resolves to type: Car[]
  }
}

当订阅路线数据时，我们无法知道期望的数据类型

ngOnInit(): void {
  this.route.data.subscribe(data => 
    data.cars // type: any
    // data is a type of Data, unfortunately there's nothing like this.route.data<type>
  });
}

这对于智能感知的正常工作很有用，当然也有助于在编译时捕获各种错误。目前有没有办法指定数据结构？先感谢您。

我的一个延迟加载模块遇到了一个问题，当在子路由之间导航时，父组件被完全破坏和重建。

该系统包括许多延迟加载的模块，其路由定义如下（请原谅命名，我不得不混淆一些东西）：

 {
    path: '',
    canActivate: [DefaultLandingGuard],
    component: LandingComponent,
    pathMatch: 'full',
    data: { permissions: [] }
  },
  {
    path: 'main',
    loadChildren: './main/main.module#MainModule'
  },
  {
    path: 'secondary',
    loadChildren: './secondary/secondary.module#SecondaryModule',
    data: { game: GAME.SECONDARY}
  },

该问题特别发生在辅助模块中，如下所示：

{
    path: 'racing',
    data: { permissions: [] },
    component: RacingComponent,
    children: [
      { path: '', redirectTo: 'TODAY', pathMatch: 'full' },
      {
        path: ':timePeriod',
        component: RacingRegionListComponent
      },
      {
        path: ':timePeriod/:region',
        component: RacingRegionListComponent
      },
      {
        path: ':timePeriod/:region/:venue',
        component: RacingRegionListComponent
      }
    ]
  },

外观RacingComponent如下：

<racing-navigation></racing-navigation>

<router-outlet></router-outlet>

在该 …

我有一个关于嵌套路由器出口的问题。我有三个路由器出口，其中两个已命名。

第二个路由器出口嵌套在主路由器出口内。第三个路由器出口嵌套在第二个路由器出口内。

所有路由器出口都通过不同的模块分开。但是，当我尝试导航以激活第三个路由器出口时，我总是收到一条错误消息，指出该路由不存在。

我在 stackblitz 上创建了一个示例：示例链接

第二个路由器出口工作得很好，正如您在“概述”路由中看到的那样。“命令选项”路线出现问题。初始路线工作正常，但当您单击“权限”时，会显示错误。

我正在编写一个防护程序，可以防止用户在未经身份验证时访问目标网址。我正在编写一个functional guard来实现此目的，但是当我尝试通过界面访问（目标）url 时RouterStateSnapshot，我收到一个空字符串。

在下文中，stackblitz您将发现上述问题的最小重现性。（角度 15.1.2） https://stackblitz.com/edit/angular-ft2rvr

实施functional guard：

import { inject } from '@angular/core';
import { Router } from '@angular/router';
import { OAuthService } from 'angular-oauth2-oidc';

export const authGuard = () => {
  const router = inject(Router);
  const oAuthService = inject(OAuthService);
  const hasAccessToken = oAuthService.hasValidAccessToken();
  const hasIdToken = oAuthService.hasValidIdToken();

  console.log('targeUrl', router.routerState.snapshot.url); // router.routerState.snapshot.url returns empty string

  if (!hasAccessToken || !hasIdToken) {
    router.navigate(['authenticate'], {
      state: {
        targetUrl: router.routerState.snapshot.url,
      },
    });
  }
  return hasAccessToken; …

我正在 Angular 15.2.9 中实现一个功能性路由器防护，它检查用户是否登录。如果不是这种情况，防护应该返回 或falsea UrlTree（即重定向到登录页面），具体取决于参数redirectToLogin: boolean。

我正在使用类似于本文中的功能路由防护的工厂函数：

export const isLoggedIn = (redirectToLogin: boolean): CanActivateFn => {\n  return (next: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {\n    const isLoggedIn = !!inject(CookieService).check(\'some_cookie\');\n\n    if (isLoggedIn) return true;\n    if (!isLoggedIn && !redirectToLogin) return false;\n\n    const redirectUrl = inject(Router).createUrlTree([\'user\', \'sign_in\'], {\n      queryParams: { next: encodeURIComponent(`/${next.url.join(\'/\')}`) },\n      queryParamsHandling: \'merge\',\n    });\n    return redirectUrl;\n  };\n};\n

它的工作原理与预期一致，但我无法为其编写规范：

  let cookieServiceSpy;\n  let activatedRouteSnapshot;\n\n  beforeEach(() => {\n    cookieServiceSpy = jasmine.createSpyObj<CookieService>([\'check\']);\n …

我目前有一个主页,可以路由到我公司运行的所有不同工作流程.我们有大约15个不同的工作流程,每个工作流程都由用户角色保护.如果您在数据库中没有正确的用户角色,则不会看到该页面的相应链接.我们保护服务器端点,但我担心的是向人们显示链接或不显示链接的最佳方式是什么,我宁愿不重复代码.

这是一种方法:

我有一个像这样的html页面

<ul>
  <li *ngIf="authService.hasRequiredRole('users.user-admin')" routerLink="/user">Users</li>
  <li *ngIf="authService.hasRequiredRole('users.role-admin')" routerLink="/role">Roles</li>
</ul>

我有这样的身份验证服务:

hasRequiredRole(roles: string | [string]) {
    if (typeof roles === 'string') {
      roles = [roles];
    }
    for (const roleSlug of roles) {
      if (this.user.roles.find((role: any) => {
          return role.slug === roleSlug;
      })) {
        return true;
      }
    }
    return false;
  }

我有一个像这样的路由的路由器:

const routes: Routes = [{

  path: 'user',
  data: {
    allowedRoles: 'users.user-admin'
  },
  loadChildren: 'app/user/user.module#UserModule',
  canActivate: [AuthGuard]
},
{ path: 'home', component: HomeComponent }]

AuthGuard只检查用户是否已登录,然后使用路由中的数据来检查用户是否具有正确的角色.

如您所见,我们使用字符串'users.user-admin'有两个不同的位置.

我想我们应该有一个带两个警卫的路由器.一名警卫将检查用户是否已登录,另一名警卫将检查用户是否具有正确的角色.该角色将在此处进行硬编码:

export class …

我不知道是否有一种方式来获得该URL 将被角的路由器调用时产生的navigate方法.

例如:

this._router.navigate(['browse'], { queryParams: { section: 'users', isActive: true } });

可能会导致导航 /browse#?section=users&isActive=true

如何在不执行导航或更新浏览器中的URL的情况下获取此路线？

我有2个路由器插座：侧边栏和默认的一个。

 {path: 'motor/:id', component: MotorComponent}

从侧边栏插座中，我有一些指向默认路由器插座的路由器链接，它们针对相同的组件（MotorComponent）但参数不同。

this.router.navigate(['./', {outlets: {primary: ['motor', 
id]}}]);

如果我单击一个，则相应的组件已加载，但如果我单击另一个路由器链接，则未加载正确的组件。URL中的参数更改。

我读到这是一个普遍的问题。我尝试了重用策略，但我认为实施得不好，没有任何反应。

我想单击针对相同组件但参数不同的不同路由器链接，即使该组件是同一组件，该组件也会加载。

这是我的ngOninit，我在其中订阅路由参数，保存该ID，然后从服务中获取新对象。

motor: MotoarePrincipale;
id: number;

ngOnInit() {
this.route.params.subscribe(
  (params: Params) => {
    this.id = +params['id'];
  }
);
this.masinaService.getMotorByMotorId(this.id).subscribe(data => {
  this.motor = data;
});

我正在构建一个角度应用程序，一切正常，直到导入并实现了“路由模块”

错误信息

我已经经历了，不认为以下是可能的问题：

• 语法错误，例如多个逗号等
• 递归调用

路由器模块代码：

import { NgModule } from '@angular/core';
import { Routes , RouterModule } from '@angular/router';
import { RecipesComponent } from './recipes/recipes.component';
import { ShoppingListComponent } from './shopping-list/shopping-list.component';

const appRoutes: Routes = [
	{path: 'recipes', component: RecipesComponent},
	{path: 'shopping-list', component: ShoppingListComponent},
  	{ path: '', redirectTo: 'recipes', pathMatch: 'full'},
  	{ path: '**', redirectTo: '/not-found'},
]

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

export class AppRoutingModule{

}

根组件代码：

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