标签: angular-router

我想提供一个根据查询参数重定向到给定页面的路径。例如：

/redirect?page=hero&id=1

应该重定向到：

/hero/1

有没有办法在路由配置中做到这一点？就像是：

{ path: 'redirect?page&id', redirectTo: ':page/:id' }

我可以让redirectTo尊重路径参数，但不尊重查询参数。有任何想法吗？

似乎 Angular Router 的所有指南都讨论了重定向到特定路由。但是，如果您想根据某些内部逻辑重定向到不同的路线，会发生什么情况？

例如：

routes: [
 {path: 'link-from-email/:confirmationToken', customFunction: () => {
    myService.checkTokenStatus(token).subscribe((status) => {
      if(status === PREMIUM_ACCOUNT) {
        router.navigate('premium-welcome-page');
      } else if(status === BASIC_ACCOUNT) {
        router.navigate('basic-welcome-page');
      } else {
        router.navigate('registration-page');
      }
    });
}]

在 Angular 中执行此操作的标准方法似乎是通过路由重定向到一个组件，该组件根据返回的内容在其模板中显示不同的内容myService。但有些用例不希望将其包含在一个模板中。例如，在上面的示例中，我们可能想要显示三个不同的页面，并且我们可能发现将所有逻辑包含在单个组件中效率不高。或者，我们可能希望将用户引导至两个不同的流程，每个流程都组织到单独的目录中，而不是在一个组件中包含两个页面。

当然，我们可以创建一个带有空模板的虚拟组件来处理这个逻辑。但这似乎效率很低。

有没有办法以某种方式将该逻辑包含在路由中？或者我们总是必须重定向到某个组件？

问题是当我在两个相似的 URL 之间导航时，我的组件没有重新绘制。例如，当用户查看http://localhost:8088/#/app/route/study/6/detail然后导航到 时http://localhost:8088/#/app/route/study/7/detail，StudyComponent会正确地重新加载。但是，DetailComponent未重新加载。我认为原因是params细节没有改变，所以Angular认为不重新加载就可以了。但就我而言，详细信息取决于父 params。

我怎样才能解决这个问题？

我的路线：

const studyRoutes: Routes = [
    {
        path: '', component: RouteComponent,
        children:  [
            {path: 'study/:id', component: StudyComponent,
            children: [
                {path: 'detail', component: DetailComponent },
                {path: 'parts', component: PartsComponent }
            ]
        }
    ]
}
];

我的所有组件都是这样初始化的：

ngOnInit() {
    this.loader = this.route.params.subscribe(params => this.onLoad());
}

ngOnDestroy() {
    this.loader.unsubscribe();
}

当我在不同研究的细节之间导航时，从未onLoad在DetailComponent.

我为 Angular 项目定义了一个路由器。我的路由器配置如下：

export const routes: Routes = [
  {
    path: '',
    component: AppComponent,
  },
  {
    path: 'hello',
    component: HelloComponent,
  },
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes, { enableTracing: true });

当我运行该项目时，我看到路由器生命周期事件按以下顺序触发：

1. 导航开始，
2. 路由器认可，
3. 警卫检查开始，
4. 子激活开始，<-----
5. 激活开始，
6. 警卫检查端，
7. 解决开始，
8. 解决结束，
9. 激活结束，
10. 子激活结束，<-----
11. 导航结束

在此列表中，我还看到了“儿童激活开始”和“儿童激活结束”事件。但是，我没有子路线。为什么这些事件无论如何都会触发？

要查看正在运行的路由器事件，请检查以下链接的控制台输出：

https://stackblitz.com/edit/angular-khjkwg?file=app%2Fapp.routing.ts

谢谢。

在 Angular 路由器应用程序中使用路径时，我遇到无法检索 cookie 的问题。我有一个默认路由重定向到“/admin/compa”，其中设置了 2 个 cookie：第一个路径为“/”，另一个路径为“/admin”。我立即在控制台记录 document.cookie 。

当我走默认路线时，我被重定向到“/admin/compa”，但我只看到第一个 cookie。如果我在浏览器中输入“/admin/compa”，我就会看到这两个 cookie。

我不知道如何让“/admin”cookie 显示，尽管使用默认路由。这是一个演示。

我正在尝试将查询参数（而不是路由参数）传递给我的每一条辅助路由。

我想要实现的目标是拥有 3 个兄弟组件，每个组件都从其自己的辅助路由中订阅和使用查询参数，并使用 3 个不同的数据源填充我的页面，使分页/查询成为可能，并且每个数据源都是独立的。

我的 url 应如下所示，遵循 Angular 的辅助路由模式：

http://mywebsite.com/search(音乐:/?page=1&itemsPerPage=12&orderBy=createdAt/movies:/?page=1&itemsPerPage=12&orderBy=createdAt/tvShows:/?page=1&itemsPerPage=12&orderBy=createdAt)

然后，在我的每个组件中，我都可以订阅它的特定辅助路由更改，并在导航时触发对我的 API 的请求。

我知道这可以通过路由参数实现，但我希望能够灵活地仅输入所需的查询参数。这可以在 Angular 中实现吗？

谢谢！

我有以下路线。

http://localhost:4100/示例/5b8c94cfc5f85728db8bddf2/5bb426434722020c569fc5d8/(p1：.... // p2：.... // p3：...)

我有 3 条辅助路线，当我执行以下操作时遇到问题

this.router.navigate ([<any path>], {relativeTo: this.route})

，我在主出口航行，但次要出口 p1、p2、p3 未保留

有没有等于preserveQueryParams的东西？，navigationExtras？ https://angular.io/api/router/NavigationExtras 但对于辅助路线？

我正在尝试按照这篇文章和几篇类似的文章在路线之间添加转换。

我确实可以让它工作，但我在使用 CSS 绝对位置时遇到问题，这似乎需要：

router-outlet ~ * {
 position: absolute;
 width: 100%;
 height: 100%;
}

我的应用程序有多个路由出口：页眉、主页脚和页脚。我在应用程序根目录上使用 Flexbox 来使页眉和页脚粘在顶部和底部。

您可以在此stackblitz中看到布局和转换的工作原理。

问题在于，将位置设置为绝对和 100% 会导致内容进入页脚（请参阅“关于”页面）。

有没有办法在没有位置：绝对的情况下进行交叉淡入淡出过渡？这似乎假设内容占据整个页面。正如您所看到的，很多时候还有其他内容，例如页脚或其他静态内容或第二个路由器出口。

我正在寻找的是一种仅影响给定路由器插座中内容的过渡。

我的路由器配置如下所示。

const routes: Routes = [
  {
    path: 'Registration',
    component: RegisterComponent,
    children: [
      { path:'',component:ProfileComponent},
      { path: 'Dependent', component: DependentComponent },
      { path: 'Matrimony', component: MatrimonyComponent },
      { path: 'Subscription', component: MagazinesubscriptionComponent },
      { path: 'Donation', component: DonationComponent }
        ]
  },
  {
    path: 'Profile',
     component: ProfilelistComponent
    //component: VoteprofileComponent
  }
];

我想用这个路由器进行编辑。意思如下图所示。

const routes: Routes = [
  {
    path: 'Registration/:id',
    component: RegisterComponent,
    children: [
      { path:'',component:ProfileComponent},
      { path: 'Dependent', component: DependentComponent },
      { path: 'Matrimony', component: MatrimonyComponent },
      { path: 'Subscription', …

从 Angular 7 升级到 Angular 8 后，应用程序路由的 loadChildren 发生了重大变化。当这些问题得到修复并且所有测试都在运行时，我不再获得 100% 的代码覆盖率，因为 loadChildren 不再是“字符串”，而是 LoadChildrenCallBack。

我如何测试这部分代码

设置：

import { NgModule } from '@angular/core';
import { RouterModule, RouterStateSnapshot, Routes } from '@angular/router';
import {
    RouterStateSerializer,
    StoreRouterConnectingModule,
} from '@ngrx/router-store';

import { LanguageGuard } from '@routes/guards/language-guard.service';
import { RouterStateUrl } from 'interfaces';
import { ErrorPageComponent } from 'pages';

/**
 * Class to implements the RouterStateSerializer with a custom serializer
 */
export class CustomSerializer implements RouterStateSerializer<RouterStateUrl> {
    /**
     * Serialize the RouterState with the …