якорь href vs угловой маршрутизатор

Question

Я пытаюсь использовать тег привязки с href в моем приложении Angular 7.Когда я нажимаю на ссылку, URL-адрес изменяется в браузере, но страница не переходит на.Это работает, если я поставлю target = "_ self", так что это работает

<a href="/abcd" target="_self">Abcd</a>

, но это не работает, только изменения URL в браузере, но ничего не происходит

<a href="/abcd">Abcd</a>

, где, как будто яиспользуйте угловую маршрутизацию и используйте RouterLink, она работает.

<a routerLink="/abcd" routerLinkActive="active">Abcd</a>

Может кто-нибудь объяснить поведение, пожалуйста.

Answer 1

Угловые приложения - это одностраничные приложения (SPA).Использование href нарушает этот шаблон проектирования.В результате каждая навигация, использующая href, полностью сбрасывает состояние вашего приложения.Всегда избегайте href при использовании Angular или любого другого SPA.

routerLink загружает ресурсы, внутренние для Angular, и страница, загружаемая в браузер, никогда не перезагружается полностью (и поэтому поддерживается состояние приложения.)в данном случае используется индикатор загрузки браузера:

При переходе по традиционным ссылкам вы увидите в своем браузере вращение (в большинстве случаев на вкладке или в адресной строке). Когда вы ждетедля загрузки угловых компонентов этот счетчик будет простаивать.

Это то, что я всегда проверяю при разработке, когда мое состояние сбрасывается.Иногда проблема в том, что я использовал href вместо routerLink.

Answer 2

Навигация с использованием href:

href - это атрибут по умолчанию, предоставляемый браузерами для навигации (переключения) между страницами, когда вся страница будет перезагружаться, теряя текущее состояние.

, в то время как взлом заключается в предотвращении поведения по умолчанию.

например:

Внутри шаблона:

 <a href="route" (click)=onClick($event) />

Внутри компонента:

onClick(event :Event){
    event.preventDefault();
}

Использование атрибута target в href:

Please refer to https://www.w3schools.com/tags/att_link_target.asp

Навигация с использованием routerLink:

Угловая имитация вышеуказанного поведения внутри директивы routerLink

Answer 3

Использование href напрямую говорит браузеру открыть ссылку как новый , так что приложение будет перезагружено и до сих порсвязан с точной страницей, для которой он был настроен.

На основе doc , routerLink перемещает приложение без перезагрузки с использованием внутреннего API.

Вы можете щелкнуть ссылку, которая использует href и routerLink , чтобы увидеть разницу demo