Angular

Question

这是我的app-routing-module.ts

const routes: Routes = [
    {
        path: '',
        component: LayoutComponent,
        children: [
            {
                path: 'parent',
                component: ParentComponent,
                children: [
                    { path: ':id/:name', component: ChildComponent }
                ]
            }
        ]
    },
];

我编写了一个函数来检查 URL 是否正在使用 parent.component.ts 中的静态值。

goToChild() {
   this.router.navigate(['1/john'], { relativeTo: this.route });
}

然后我调用了 parent.component.html 中的函数。

<button class="btn btn-primary" (click)="goToChild()">Search</button>

当我点击按钮时，我在地址栏中得到正确的URL，

 localhost:3000/parent/1/john

但视图从未加载，它停留在 parent.component.html 上。我是 Angular 的新手，我使用的是版本 5。

如果我有这样的路线，它工作正常。

const routes: Routes = [
    {
        path: '',
        component: LayoutComponent,
        children: [
            {
                path: 'parent',
                component: ParentComponent
            },
            {
                path: 'parent/:id/:name', component: ChildComponent
            }
        ]
    },
];

我觉得把ChildComponent路由放在ParentComponent的children数组下更合适，但是当我这样做的时候。只有 URL 发生变化，视图没有变化。

任何帮助将不胜感激。

Answer 1

您需要在模板中添加一个<router-outlet></router-outlet>。这就是您允许子导航的方式

Angular - URL 已更改但未加载视图

Angular - URL changed but view not loaded

html

javascript

angular5