时间戳

首页 > 解决方案 > 组件未加载到预期的路由器插座上

angular - 组件未加载到预期的路由器插座上

问题描述

这是我的问题的副本，但我已经使问题更清楚了。我在 admin-layout.routing.ts 中有 2 个路由 admin-layout.routing.ts 和 parameter.routing.ts 我有一个 property.component.ts 的路径，它有一个名为 parameter.component.ts 的子节点。在这个 parameter.component.ts 我有一个路由器插座，我希望 soa-date.component.ts 出来。我可以访问 soa-date.component.ts 但它没有显示在预期的第二个路由器插座中。它只是出现在第一个路由器插座上。我也没有任何错误。

admin-layout.routing.ts

{ path: 'property',       component: PropertyComponent, canActivate: [AuthGuard],
    children: [
        { path: '', component: ParametersComponent,
            loadChildren: '../../property/parameters/parameters.module#ParmetersModule'
        }
    ]
},
{ path: 'person',         component: PersonComponent, canActivate: [AuthGuard] }

参数.routing.ts

import { Routes } from '@angular/router';
import { SoaDateComponent } from './soa-date/soa-date.component';

export const ParametersRoutes: Routes = [
    { path: 'soadate', component: SoaDateComponent }
];

参数.module.ts

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(ParametersRoutes),
    ],
    declarations: [
        SoaDateComponent
    ]
})

export class ParmetersModule { }

参数.component.html

<a [routerLink]="['/soadate']" routerLinkActive="active" >SOA DATE</a>
<router-outlet name="paramOutlet"></router-outlet>

我需要你的帮助。谢谢你。

标签： angular

解决方案

由于没有足够的代码来调试这个问题，我根据我对问题的理解创建了一个堆栈闪电战。我认为你需要在parent-children这里创建一个结构来实现你正在寻找的东西。

还有一件事你包括ParametersComponent在declarations任何组件中吗？

不管怎样，这里是stackblitz，

https://stackblitz.com/edit/angular-yashpatelyk-routing-inap6y

如果我没有错，这就是您要实现的目标，

App> PropertyComponent> ParametersComponent>SoaDateComponent

在我的示例中，单击显示的链接，您将看到上面的结构，即正确SoaDateComponent加载。ParametersComponent可能对您有帮助的代码在parameters.module.ts

推荐阅读