我有嵌套组件：
我使用 Router 的Resolve解析主菜单和页面内容：
const routes: Routes = [
{
path: '',
component: PageWrapperComponent,
resolve: {
mainMenu: MainMenuResoler,
},
children: [
{
path: '',
component: ContentComponent,
resolve: {
content: ContentResolver,
}
}
]
];
我想在 MainMenuResoler 完成后立即显示主菜单（PageWrapperComponent）。ContentResolver 完成后，然后就是内容（ContentComponent）。但如何呢？
我预料到路由器会出现这种行为。相反，Angular 会等待两个解析器完成，然后同时显示 PageWrapperComponent 和 ContentComponent。
我正在我的 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-browser/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(
// …我正在尝试按照这篇文章和几篇类似的文章在路线之间添加转换。
我确实可以让它工作，但我在使用 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 …我正在为我的项目做面包屑。我这里有两个问题：
两者该如何解决呢？
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>
在该 …