В чем разница между [routerLink] и методом this.route.navigate () в Angular?

Question

Я новичок в Angular и использую Angular8.

Когда я настраиваю маршрут для проекта, я очень запутался, как работает маршрут, используя только

[routerLink] внутри template и this.route.navigate () в файле .ts.

Пример

// just routerLink
<div [routerLink]="/blog/32"></div>


// this.router.navigate()

// blog.html
<div (click)="moveToBlog(id)"></div>
// blog.ts
  public moveToBlog(id) {
    if (id) {
      const translatedPath= `/blog/${id}`;
      this.router.navigate([translatedPath]);
    }
  }
//

Как они работают по-разному?

Answer 1

На самом деле [routerLink] и route.navigate() перемещаются одинаково, но директива [routerLink] более удобна и проста в использовании в шаблонах. В то время как route.navigate() подход требует, чтобы вы добавили Router зависимость к вашему компоненту, добавьте (click) слушатель к элементу и вручную запускайте навигацию при нажатии кнопки, [routerLink] запрашивает у вас только ссылку.

Еще одна вещь, которую следует учитывать, это то, что элементы <a> html предпочтительнее использовать, если щелчок запускает только навигацию. Если пользователь наводит курсор на элемент <a [routerLink]="'/blog/32'"> на странице, браузер отображает URL-адрес для пользователя. Для элементов <a> также имеется другое меню, вызываемое правой кнопкой мыши, которое позволяет, например, скопировать URL. <a> элементы могут быть нажаты средней кнопкой мыши, по крайней мере, в некоторых браузерах такой щелчок открывает URL в новой вкладке.

Answer 2

Routerlink предназначен для использования в вашем шаблоне (. html)

, но router.navigate предназначен для использования в вашем классе (.ts)

Представьте себе, если вы хотите перемещаться после получения некоторых данных из бэкэнда, как вы можете сделать это с помощью routerlink?

Ссылка на маршрутизатор больше подходит для ситуации, когда пользователь нажимает на что-то.

Посмотрите на здесь и здесь для получения дополнительной информации.