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

时间:2017-11-28 19:12:06

标签: javascript html angular angular5

这是我的app-routing-module.ts

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

我已经编写了一个函数来检查网址是否使用parent.component.ts中的静态值。

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

我在parent.component.html中调用该函数。

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

当我点击按钮时,我会在地址栏中找到正确的网址

 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的子数组下,但是当我这样做时,感觉更合适。只有URL更改,而不是视图。

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:3)

你能分享当前的parent.component.html吗?你在模板里面有<router-outlet></router-outlet>吗?这就是你允许儿童导航的方式