Question

我有以下路由：

path: 'task',
component: TaskComponent,
children: [
    {
        path: ':category/:id',
        component: TaskEditComponent
    }
]

在我的TaskComponent上，我有一个可点击的list div，会重定向到上面的路径

<div *ngFor="let url of urlList; let i = index" (click)="goToLink(url)">

此urlList包含：/task/personal/10其中personal是类别，10是ID。

现在我的TaskComponent，我有goToLink方法：

goToLink(url: string) {
    this._router.navigate([url]);
}

现在这个工作正常，我可以看到我的网址正在改变。但我没有点击我的路由上指定的组件TaskEditComponent的构造函数或OnInit方法。请注意，在第一次加载时，我能够点击构造函数，但是当我点击我的div上的其他URL时，我没有点击它。

export class TaskEditComponent implements OnInit, OnDestroy {

    constructor() {
    }

    ngOnInit() {
        console.log('should hit this')
    }
}

我正在阅读生命周期钩子，但我需要帮助我在这里做错了。

Answer 1

如果只有路由参数发生变化，Router会重用组件实例并且不实例化它，因此不会调用构造函数和onInit。所以，如果你来过这里：

/task/personal/10

现在导航到

/task/personal/11

仅更改参数，因此将重用该组件。验证它的一种简单方法是将以下内容放在构造函数中：

constructor(r: ActivatedRoute) { 
    r.url.subscribe((s:UrlSegment[]) => { console.log("url", s); }); 
}

每次切换路线时都应记录。

路由器导航不会击中组件方法

1 个答案: