我正在使用Angular2 Seed应用程序,您可以在official repo中找到它。如您所见,这里我们导入了angular2 / router,我们正在使用它来创建应用程序的基本路由。
import {Component, ViewEncapsulation} from 'angular2/angular2';
import {
RouteConfig,
ROUTER_DIRECTIVES
} from 'angular2/router';
...
@RouteConfig([
{ path: '/', component: HomeCmp, as: 'Home' },
{ path: '/about', component: AboutCmp, as: 'About' }
])
export class AppCmp {}
我的问题是:如何配置路由器以在我的网址中添加主题标签,使其看起来像:localhost:5555 /#/ about 。有没有美丽而简单的方法来制作它? (与之前的$ locationProvider一样)
我知道这很奇怪,但我曾经在网址中喜欢这个标签,而我的apache-config也曾经喜欢它。当然,我可以更改我的httpd.conf文件,非常简单和正确,但我真的想弄清楚,如何简单地添加hashtag,与Angular2路由器。
答案 0 :(得分:7)
在您的应用程序启动文件中,您需要在调用bootstrap时提供locationstrategy,
import {LocationStrategy, HashLocationStrategy} from 'angular2/router';
class MyDemoApp {
//your code
}
bootstrap(MyDemoApp,[provide(LocationStrategy, {useClass: HashLocationStrategy})]);
答案 1 :(得分:1)
要在Angular路由中使用井号,您可以执行以下操作:RouterModule.forRoot(routes,{
useHash: true
})
答案 2 :(得分:0)
对于遇到相同问题但不使用Angular Seed的任何人:
navigateToSomeLocation(location: string){
window.location.href = "#" + location;
}
如果您使用Angular Material,并且想订阅滚动事件以更改url(例如:https://material.io/design/navigation/understanding-navigation.html#),请订阅ScrollDispatcher:
constructor(public scrollDispatcher: ScrollDispatcher) {
this.scrollingSubscription = this.scrollDispatcher.scrolled()
.subscribe((data: CdkScrollable) => {
console.log(window.pageYOffset);
});
}
,然后检查用户是否在锚点上滚动:
elem = document.getElementById('someHTMLElement') as HTMLElement;
distance = elem.getBoundingClientRect().top;
if (distance < 30 && distance > -30) {
this.navigateToSomeLocation(elem.id);
}