如何在不重新加载的情况下转到其他页面 Router.navigate 在 Angular 7 中

Question

我在组件模板中有一个按钮。单击时，使用以下代码调用组件方法：

saveAndGoToDetails()
{
     // TODO: Here will be saving
     this.router.navigate(['/details/1029']);
}

它是从具有以下部分的组件调用的：

 <button mat-flat-button color="primary" (click)="saveAndGoToDetails()">Save and go to details</button>

它应该做的是在不重新加载整个应用程序的情况下导航到此路线。尽管如此，它在转到 URL 时会重新加载整个页面。

如何在不重新加载 Angular 7 页面的情况下正确从组件导航到其他路由？

Answer 1

解决方案是添加：

return false

在

saveAndGoToDetails()

处理程序函数。该问题是由角度材质表单的工作方式引起的。如果其中放置了按钮。即使它不是提交按钮，Angular 材质也会将其作为提交进行处理。

Answer 2

首次导入

import {ActivatedRoute} from '@angular/router';

然后添加私有路由：构造函数中的激活路由为

constructor(..., private route: ActivatedRoute){}

然后你可以使用以下函数

this.router.navigate(['details', '1029'], {relativeTo: route, skipLocationChange: true});