Когда мы используем href в angular, приложение теряет свое состояние и все приложение перезагружается. Но когда мы используем routerlink , состояние приложения остается прежним. Например, давайте предположим, что у вас есть две страницы / компонента в вашем угловом проекте, названные как вторая и третья.
<div class="nav">
<p>Using "href"</p>
<ul>
<li><a href="/" >1</a></li>
<li><a href="/second" (click)="onClick($event)">2</a></li>
<li><a href="/third">3</a></li>
</ul>
</div>
<hr>
<div class="nav">
<p>Using "routerLink"</p>
<ul>
<li><a routerLink="/">1</a></li>
<li><a routerLink="/second">2</a></li>
<li><a routerLink="/third">3</a></li>
</ul>
</div>
<hr>
<div class="page-content">
<p>Page Content</p>
<router-outlet></router-outlet>
<hr>
<p>Input Field</p>
<app-input></app-input>
</div>
В приведенном вышеНапример, если вы наберете что-то в поле ввода и воспользуетесь навигацией href , то состояние этого будет иметь потери. Но когда вы используете навигацию routerlink для навигации, у вас будет этот вводимый текст.
Давайте посмотрим, что происходит за экраном: -
<li><a href="/second" (click)="onClick($event)">2</a></li>
onClick(event: Event) {
event.preventDefault();
}
, если вы запретите настройку по умолчаниюдействие href вы увидите, что страница не будет перезагружена, что происходит в routerlink , это просто означает, что routerlink также использовал href для навигации, но путем предотвращения его поведения по умолчанию.