路由器导航未命中组件方法答案

【问题标题】：Router navigate not hitting component method路由器导航未命中组件方法
【发布时间】：2017-10-23 00:54:54
【问题描述】：

我有以下路由：

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]);
}

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

export class TaskEditComponent implements OnInit, OnDestroy {

    constructor() {
    }

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

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

【问题讨论】：

这很可能是由于路由器重用了组件，尝试在TaskEditComponent的构造函数中添加以下内容：constructor(r: ActivatedRoute) { r.url.subscribe((s:UrlSegment[]) => { console.log("url", s); }); }，你在改变状态时得到日志吗？
是的，它现在正在记录。感谢您的帮助！
当然，我可以将其发布为答案吗？
当然可以。
完成，您可以接受了，谢谢

标签： angular

【解决方案1】：

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

/task/personal/10

现在导航到

/task/personal/11

只有参数改变了，所以组件会被重用。验证它的一种简单方法是将以下内容放入构造函数中：

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

每次切换路线时都会记录下来。

【讨论】：