标签: angular-router

如果我的 Angular 应用程序，如果我导航（通过明确输入 URL 或单击指向它的页面链接）到http://localhost:4200/#/sign-in页面加载正常并显示我的登录表单。如果我然后Refresh在浏览器中单击，我将被带回根页面http://localhost:4200/#/。

我的路由器很简单：

export const routes: Route[] = [
  { path: 'sign-up', component: SignUpComponent},
  { path: 'sign-in', component: SignInComponent},
  { path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule'},
  { path: 'dashboard', loadChildren: 'app/user/user.module#UserModule', canActivate: [ UserLoggedInGuard ]},
  { path: '', pathMatch: 'full', component: HomeComponent},
  { path: '**', pathMatch: 'full', component: PageNotFoundComponent},
]

我在用

• 视窗 8
• 铬 62
• @angular/core": "^4.2.4
• @angular/router": "^4.2.4

任何想法为什么会发生这种情况？

据我所知，它的调用签名是canActivate这样的：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

}

我有一个服务，它需要一个组件的名称并返回访问该组件所需的用户角色，以便我可以检查canActivate我的守卫功能，活动用户是否具有相应的角色。我的问题是，我不知道如何访问该组件。经过一番谷歌搜索后，我找到了这样的解决方案：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  const nameOfComponent = route.routeConfig.component.name;
  return doSomeRoleCheck(nameOfComponent);
}

但就我而言，我只是收到一个错误：“无法读取未定义的属性‘名称’”。如何访问活动路由的组件，尤其是作为字符串的名称？

编辑

我发现，我确实在父路线上检查了这个守卫。当我在子路由中检查它时，它可以工作。如何从父组件访问子组件ActivatedRouteSnapshot

我有一个 Angular 5 应用程序，它可以动态加载功能模块并在主路由器插座中显示它们的内容。下面的代码显示了我的基本配置：

来自根模块（主路由器插座）的 app.component：

<router-outlet></router-outlet>

root 的路由配置（模块从传递的 url 动态加载）：

const routes: Routes = [
    { path: 'module1', loadChildren: ...},
    { path: 'module2', loadChildren: ...}
];

export const AppRoutes = RouterModule.forRoot(routes);

功能模块之一的示例路由：

const routes: Routes = [
    { path: 'report/:reportId', component: ReportComponent}
];

export const AppRoutes = RouterModule.forChild(routes);

及其包含另一个路由器插座的 app.component ：

<router-outlet></router-outlet>

这样的配置工作正常 - 如果我去 mysite.com/module1，然后加载 module1 并且 angular 控制功能模块路由器，所以访问 mysite.com/module1/report/2 会在功能模块的路由器出口内显示 ReportComponent。

我现在要做的是将 TabsComponent 添加到我的主模块中，以便能够从多个选项卡组合页面，其中每个选项卡将包含一个特定模块。我想以某种方式为 root 使用已经指定的路由，而无需手动将其重复为 TabsComponent 的子项，并将功能模块加载到 TabsComponent 的路由器插座中。

tabs.component:

<tabs-navigation></tabs-navigation>
<router-outlet></router-outlet>

tabs.configuration（在运行时通过 http 动态加载）：

{ …

I'm trying to get the target URL in canActivate guard but unable to do so. I've configured preloadingStrategy: PreloadAllModules in RouterModule.forRoot when i use ActivatedRoute its url property doesn't contain path. here's both of my module:

app.module.ts

const appRoutes: Routes = [
  { path: 'login', component: LoginComponent },
  {
    path: '',
    component: SiteLayoutComponent,
    children: [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      {
        path: 'dashboard',
        loadChildren: './dashboard/dashboard.module#DashboardModule'
      },
      {
        path: 'user',
        loadChildren: './user/user.module#UserModule'
      }
    ]
  },
  { path: '**', …

我想进行路线过渡，但不是简单的滑出/滑入动画。我正在寻找左边这样的动画（https://cdn.dribbble.com/users/495792/screenshots/3847874/allshots3.gif）

我知道如何为将重绘整个内容的路线设置动画。但是我怎样才能通过改变路线实现一个/多个组件转换到另一个组件的效果（左侧的这种放大/缩放效果）。

我将不胜感激任何建议或指导在哪里寻找一些示例代码。

我正在我的 angular 6 应用程序中实现角材料选项卡。如果我使用没有绑定到 routerLink 的材料选项卡，则滑动动画有效，路由器出口中的内容也有效。然而，当我绑定到 routerLink 时，滑动动画不起作用，内容只是以一种非常笨重的方式出现。

<div class="my-3">
    <nav mat-tab-nav-bar>
        <a mat-tab-link
            *ngFor="let tab of tabs"
            [routerLink]="tab.path"
            routerLinkActive #rla="routerLinkActive"
            [active]="rla.isActive">
            {{tab.label}}
        </a>
   </nav>
</div>

<router-outlet></router-outlet>

路径在组件模板中声明：

tabs: any[] = [
    {
        label: "Details",
        path: "details"
    },
    {
        label: "Users",
        path: "users"
    }
]

并且模块被延迟加载。

有谁知道为什么动画会中断？我已经做了一些挖掘以找到答案。我正在从应用模块中的“@angular/platform-b​​rowser/animations”导入 BrowserAnimationsModule，我也没有在任何地方声明任何 NoopBrowserAnimations。

任何帮助将非常感激。

我看到一个订阅router.events产生三个调用，每个路由更改为回调函数，每个调用都报告instanceof event为ActivationEnd.

console.log('This code runs only once, at site initialization.');
router.events.subscribe((event: RouterEvent) => {
    if (event instanceof ActivationEnd) {
        console.log('This should only log once per route change, but logs three times.');
    };
});

我在 Github 上找到了这个线程，它似乎相关，但我很难相信这仍然是一个问题......

我正在使用 Angular 5 (5.2.10)。

更新：似乎每个路线段都会触发此事件...正在检查文档。

我正在尝试使用解析器来根据路由包含的给定参数检索数据。

不幸的是，当我添加另一个数据流时，我的数据依赖于解析器从未真正解析过。

如果我直接返回一个立即解决的值，一切正常。我调试了这种情况，看到我收到了所有部分信息，但最终未能真正解决。

这是一个快速示例。如果需要更多代码来理解问题，请联系我。

我的服务：

export class MyService {
  get(bar) {
    return of(new Foo(bar));
  }
}

SecondService（这个从后端检索数据）：

export class SecondService {
  private readonly _observable: Observable<Bar>;
  constructor() {
    this._observable = merge(
      // Other manipulations
    ).pipe(
      // other manipulations
      shareReplay(1)
    )
  }

  observable(): Observable<Bar> {
    return this._observable;
  }
}

解析器：

export class MyResolver {
  constructor(_secondService: SecondService, _myService: MyService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Foo> {
    // Does not work - Simply does not resolve
    // return this._secondService
    //   .observable()
    //   .pipe(
    // …

我有一个 angular 6 项目，结构如下...

src
|- app
|  |- core
|  |  |- layout.component.ts/html/scss
|  |  |- core.module.ts
|  |- views
|  |  |- modules
|  |  |  |- sample
|  |  |  |  |- sample.component.ts/html/scss
|  |  |  |  |- sample-routing.module.ts
|  |  |  |  |- sample.module.ts
|- app.component.ts/html/scss
|- app-routing.module.ts
|- app.module.ts

...示例模块的路由结构看起来像...

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        component: SampleComponent
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
}) …

如何从父路由的守卫重定向到子路由，同时保护子路由不被直接访问*？

绝对导航的问题，当导航到子路由时，父组件上的守卫会在循环中再次调用。

相对导航的问题在于守卫正在保护父路线，因此还没有激活的路线可以相对导航。此外，这可能不会保护子路由。也许同样的守卫也可以与子路由或 CanActivateChildren 一起使用。

Stackblitz 示例：https ://stackblitz.com/edit/angular-qbe2a7

路线

const appRoutes: Routes = [
  {
    path: 'foo',
    component: FooComponent,
    canActivate: [ RedirectionGuard ],
    children: [
      {
        path: 'foo-child',
        component: FooChildComponent
      }
    ]
  }
];

守卫中的 canActivate()

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean>|Promise<boolean>|boolean {

    console.log('guard: ', route, state, this.route);

    // idea: create own ActivatedRoute and give it the values from ActivatedRouteSnapshot which knows about 'foo/'
    const foo: ActivatedRoute = new ActivatedRoute();
    console.log(foo);

    // Error: Cannot …