我有一个组件,用户可以从各个页面访问该组件。当用户单击此组件中的“确定”按钮时,应将其重定向到上一页,即。他来到此组件的页面。
我碰到window.history.back(); 和this.router.navigate('../')。
另外,window.history.back();和之间有什么区别?和this.router.navigate('../')
我也想了解this.location.back()
和之间的区别window.history.back()
。
要获得上一次成功的导航并导航到它,您可以使用:
const lastNav = router.getLastSuccessfulNavigation();
const previousRoute = lastNav.previousNavigation;
router.navigateByUrl(previousRoute);
注意:由于previousRoute
是的类型UrlTree
,因此可以直接使用它来导航navigateByUrl
方法。
关于history.back(来自文档):
history.back()方法使浏览器向后移动会话历史记录中的一页。与调用history.go(-1)具有相同的效果。如果没有上一页,则此方法调用不执行任何操作
虽然this.router.navigate( '../' )
会使用以下命令将您带入更高级别的导航:<a [routerLink]="['../', 'foo', 'bar']">Go Up</a>
所以不同之处在于window.history.back();
它将带领您返回并this.router.navigate( '../' )
带领您向上。
关于您的最后一个问题:
该window
对象引用当前框架,该框架具有一个历史对象属性,该属性返回窗口的历史对象->更多信息:https : //www.w3schools.com/jsref/obj_history.asp
Whilelocation
应该从@angular/common
类似以下的构造函数中导入并使用:
import {Location} from '@angular/common';
@Component({
// component's declarations here
})
class SomeComponent {
constructor(private location: Location)
{}
goBack() {
this.location.back();
}
}
goBack()
然后可以通过例如按钮onClick
上的调用该函数Go Back。
请查看https://angular.io/guide/architecture-components以获得更多详细信息。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句