我正在尝试找到一种router-outlet根据用户的角色有条件地渲染子路由中的组件的方法。

例如，我有一个 DashboardComponent，其中包含一个router-outlet. 我希望在 child 中呈现的组件router-outlet根据用户角色而有所不同，该角色是通过令牌传入的，而无需指定其他路由。

我希望尝试在接近此的地方编写我的路线：

{ 
    path: 'dashboard', 
    component: DashboardComponent,
    children: [
        { path: '', component: DataViewsComponent }, // For standard user role
        { path: '', component: AdminViewsComponent } // For the admin user role
    ]
}

当然，这种确切的模式是行不通的，因为路由器只看到两条相同的路由路径。

我已经成功编写了一个服务，该服务使用该canActivate属性来检查用户的角色并根据角色转发到不同的路由：

@Injectable()
export class RoleRouteRedirectService implements CanActivate {

    roleRoutingPermissions: any = {
        // Will contain redirects for every route in the app
        // For this example, only contains reroutes for the dashboard …

我有两个组件。在成功的服务器响应的第一个中，我想要执行以下操作：

this.router.navigate(['']);
this.snackBarMessage = 'Successfully submitted';

然后页面被重定向到另一个组件，我想在那里显示 SnackBarMessage 消息，例如 (ngOnInit())

像这样的东西：

this.snackBarService.openSnackBar(snackBarMessage, 'Close', 9999999);

我的小吃吧服务：

import { Injectable } from '@angular/core';
import { MatSnackBar } from '@angular/material';

@Injectable({
  providedIn: 'root'
})
export class SnackBarService {

  constructor(private matSnackBar: MatSnackBar) { }

  openSnackBar(message: string, action: string, duration?: number) {
    this.matSnackBar.open(message, action, { duration });
  }
}

我怎样才能做到这一点？导航后如何传递snackBarMessage到另一个组件？

我的导航栏上有一个图标，用作admin路线的链接，我希望当我在该特定路线上时更改此图标，为此我可以将类替换mdi-settings-outline为mdi-settings，这将显示填充版本相同的图标。

<li class="nav-item">
    <a routerLink="/admin" routerLinkActive="mdi-settings" class="nav-link mdi mdi-settings-outline"></a>
</li>

然而，常规routerLinkActive指令只会将类添加mdi-settings到链接中，这不会产生所需的结果。routerLinkActive 指令是否可以以某种方式替换该类，而不仅仅是添加它？

我正在使用 Angular 7 编写一个简单的应用程序。但路由部分似乎完全失控了。

供参考。我最近进行了 Angular 8.2 的全局安装，但我的项目使用了 Angular 7。

请在下面找到详细信息。

尝试过

1. <a [routerLink]="['/login']">Login</a>
2. <a routerLink="/login">Login</a>
3. <a routerLink='/login'>Login</a>

对于路由器链接。但似乎事情已经坏了。

下面是我的代码片段。

1. 包.json

{
  "name": "myapp",
  "version": "0.0.0",
  "scripts": {
   .....
   .....
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.8",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1", …

在尝试了所有其他解决方案之后，我仍然遇到我的问题：尝试导航到其他组件，URL 已更改，但我留在同一页面上，目标组件未加载。

解释：

当用户到达 App 时，根据会话存储，他会转到HOME 组件或LOGIN 组件。

• 如果他登陆主页组件，一切正常，他可以在应用程序中导航到任何地方。

• 否则，如果他登陆 LOGIN，然后登录自己，然后重定向到 HOME 组件，那么就不再有导航工作，只有 url 发生变化。

我使用了延迟加载和 authGuard。

控制台上没有错误。

上述两种情况之间的路由器跟踪日志是相同的（我的意思是在第二种情况下，NavigationEnd 组件是正确的目标组件，但它从未加载）

这是我的app-routing.module.ts：

 const routes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full',
  },
  {
    path: 'home',
    loadChildren: './pages/home/home.module#HomeModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'description',
    loadChildren: './pages/description/description.module#DescriptionModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'nsp',
    loadChildren: './pages/nsp/nsp.module#NspModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'login',
    loadChildren: './pages/login/login.module#LoginModule'
  },
  {
    path: 'mappings',
    loadChildren: …

如何使用组件中的路由数据在 Angular 8 中设置动态页面标题？

我正在尝试使用 Angular v14 功能之一，即 CanActivateFn。

不幸的是，当我的守卫被执行并且返回的语句为假时，我没有被重定向。正在抛出错误：

未捕获（承诺中）： TypeError：router.parseUrl 不是函数 TypeError：router.parseUrl 不是函数

允许实体.guard.fn.ts

export function AllowedEntitiesGuard(allowedEntities: string[]): CanActivateFn {
  const router = Inject(Router);
  return (route: ActivatedRouteSnapshot) => {
    const entitiesTypeParameter = route.paramMap.get('entitiesType')

    return allowedEntities.indexOf(entitiesTypeParameter) !== -1 ? true : router.parseUrl('/');
  };
}

主要.ts

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(withInterceptorsFromDi()),
    {
      provide: HTTP_INTERCEPTORS,
      useClass: JwtInterceptor,
      multi: true,
    },
    { provide: APP_CONFIG, useValue: environment },
    provideRouter(APP_ROUTES),
  ],
});

当我尝试 console.log 路由器时，它向我显示其函数 ParamDecorator 实例。我做错了什么？

我在Angular 4中进行路由时需要帮助。我想显示这样的URL。Localhost：4200 / user / 1（如果我单击第一个用户的查看详细信息）。我对如何做到这一点感到困惑。我在下面的代码中已尽力而为，但仍然无法正常工作。

app-routing.module.ts

const appRoutes: Routes = [
    { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
    { path: 'dashboard', component: DashboardComponent },
    { path: 'user', component: UserComponent, children: [

        { path: 'create-new-user', component: CreateNewUserComponent },
        { path: 'user-list', component: UserListComponent },
        { path: 'user-detail/:id', component: UserDetailComponent },

]},
];


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

}

我有一个导航栏作为路由器,有两个锚标签,Home和Create,Create是Home的孩子.我想在选中时激活Create锚标记,但Home锚也会激活,因为它是Create的父级.

是否有任何方法可以防止父级锚标记在子级时变为活动状态？

Home.component

<ul class="nav navbar-nav">
   <li [routerLink]="'/home'" routerLinkActive="active">
       <a>Home</a>
   </li>
   <li [routerLink]="'create'" routerLinkActive="active">
       <a>Create</a>
    </li>
</ul>

app.routing

const appRoutes: Routes = [{
    path: "home", component: HomeComponent, children: [{
        path: "create", component: CreateComponent
    }]
}];

目前的行为

访问/ home(仅通知主锚标记处于活动状态):

访问/ home/create(注意两个锚标签都是活动的)

想要行为

访问/ home(仅通知主锚标记处于活动状态):

访问/ home/create(通知仅创建标记处于活动状态):

我在家庭组件中遗漏了什么或者这是一种正常的行为吗？我不应该使用Create作为Home的孩子吗？

非常感谢你们.

所以我试图在网址上隐藏我的路线,这意味着我希望我的应用程序始终将网址显示为在根应用程序中,例如:

"www.foo.com"

代替

"www.foo.com/login"

它有什么方法可以在角度2中实现这一点？

在此先感谢您的帮助!