标签: angular-router

我为 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

谢谢。

我看到一个订阅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)。

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

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

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

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

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

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

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

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

我的服务：

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(
    // …

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

我想要实现的目标是拥有 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 中实现吗？

谢谢！

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

我确实可以让它工作，但我在使用 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 …

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

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>
  });
}

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