Angular2 Router: добавить хэштег в URL

Question

Я использую приложение Angular2 Seed, и вы можете найти его в официальном репо. Как видите, здесь у нас импортирован 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 {}

Мой вопрос: как я могу настроить маршрутизатор для добавления хэштега в мой URL, чтобы он выглядел так: localhost: 5555 / # / about. Есть ли какой-нибудь красивый и простой способ сделать это? (как ранее с $locationProvider)

Я знаю, что это странно, но я любил этот хэштег в URL, и мой apache-config также любил его. Конечно, я могу изменить свой файл httpd.conf, очень легко и правильно, но я действительно хочу выяснить, как просто добавить хэштег, с Angular2 Router.

Answer 1

В файле запуска вашего приложения вы должны указать стратегию размещения при вызове начальной загрузки,

import {LocationStrategy, HashLocationStrategy} from 'angular2/router';

class MyDemoApp {
    //your code
}

bootstrap(MyDemoApp,[provide(LocationStrategy, {useClass: HashLocationStrategy})]);

Answer 2

Для тех, у кого такая же проблема, но не используется 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);
  }

для справки см.: Изменить URL при ручной прокрутке на якорь?

Answer 3

Чтобы использовать хэштег в маршрутах Angular, вы можете сделать это: RouterModule.forRoot(routes,{ useHash: true })