如何在Angular 2中导航到不同的URL?我知道我们可以使用JavaScript的
window.location.href = '...';
但这似乎不太对,并会导致页面刷新。我相信Angular 2应该有功能,可以让您在不刷新页面的情况下在URL之间移动。只是我在文档中找不到它。
提前感谢!
如何在Angular 2中导航到不同的URL?我知道我们可以使用JavaScript的
window.location.href = '...';
但这似乎不太对,并会导致页面刷新。我相信Angular 2应该有功能,可以让您在不刷新页面的情况下在URL之间移动。只是我在文档中找不到它。
提前感谢!
根据文档,您可以使用Router及其navigate函数来更改当前状态,并在必要时传递参数:
import {Component, ...} from 'angular2/angular2';
import {Router, ...} from 'angular2/router';
import {HomeCmp} from '../home/home';
@Component({
selector: 'app',
// params of your component here
})
@RouteConfig([
{ path: '/', component: HomeCmp, as: 'MyHome' },
// your other states here
])
export class AppCmp {
router: Router;
constructor(router: Router) {
this.router = router;
}
navigateToHome() {
// for example, that's how we can navigate to our home route
this.router.navigate(['./MyHome', {param: 3}]);
}
}
这里是官方文档链接。
此外,这是一个种子项目的链接,其中有一个很好的使用路由器的示例。
http://www.cnn.com
。 - Michael Orylwindow.location.href='http://www.cnn.com'
。否则,请按照答案进行操作。 - MacKentochwindow.location.href = ...
(用于非 Angular URL)的等效函数是location.go()
。具体可以参考:https://angular.io/api/common/Location#go - Andriylocation.go()
不会重定向页面,只会更改历史记录 API 状态。如果您需要重定向,则可以将文档 (import { DOCUMENT } from '@angular/common';
) 注入到构造函数中 (@Inject(DOCUMENT) private document: Document
) 并使用this.document.location.href = ...
。 - Andriy