Маршрутизатор Angular2: добавьте хэштег к URL-адресу

Я использую приложение 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.


angular angular-routing angular-seed
person punov    schedule 20.10.2015    source источник

Ответы (3)


arrow_upward
7
arrow_downward

В файле запуска вашего приложения вам необходимо указать locationstrategy при вызове bootstrap,

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

class MyDemoApp {
    //your code
}

bootstrap(MyDemoApp,[provide(LocationStrategy, {useClass: HashLocationStrategy})]);
person lame_coder    schedule 20.10.2015
comment
Кажется, теперь он находится в разделе «@angular/common». angular.io/docs/ts/latest/api/ общий/индекс/ - person Enis; 30.05.2017

arrow_upward
1
arrow_downward

Для тех, у кого такая же проблема, но не используется 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-адрес при ручной прокрутке до привязки?

person Daniel Kettemann    schedule 03.05.2019

arrow_upward
1
arrow_downward

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

person Francisco Inoque    schedule 11.04.2020