Angular router: Chuyển route thì sử dụng RouterLink, Navigate hay NavigateUrl

Angular router cho phép chúng ta chuyển từ một view này đến một view khác bằng cách thực hiện các tác vụ tương ứng
Trong Angular router, chúng ta biết đến cách dễ dàng để chuyển giữa các route đó là sử dụng routerLink directive.
Trong bài viết này chúng ta cùng xem qua 1 số ví dụ về cách chuyển route dùng routerLink , cũng như cách chuyển route trong component class.

RouterLink

Trường hợp đơn giản dùng routerLink directive:

<a routerLink="/post-list/post1">Post 1</a>

Cách khác bạn có thể truyền vào trong routerLink 1 array:

<a routerLink="['/',  'posts-list', 'post1']">Post 1</a>

<a routerLink="['/',  'posts-list', post.id, 'view']">Post 1</a>

Bạn có thể dùng đường dẫn tương đối để chuyển về đường dẫn cấp cao hơn:

<a routerLink="['../',  blogs-list', 'blog1']">Blog 1</a>

Trong ví dụ trên, nếu bạn đang đứng ở /post-list/post1 thì khi thực hiện câu lệnh trên nó sẽ chuyển bạn đến /blogs-list/blog1. Bạn cũng có thể truyền params vào trong đường dẫn:

<a routerLink="['/',  blogs-list', {page: 1},'blog1']">Blog 1</a>

Kết quả thu được trong ví dụ trên sẽ là /blogs-list;page=1/blog1

Named Outlets

<router-outlet></router-outlet>
<router-outlet name='left'></router-outlet>
<router-outlet name='right'></router-outlet>

Routeroutlet được hiểu đơn giản như một nơi giữ chỗ cho các thông tin được hiển thị khi gọi đến route nào đó. Chúng ta có thể lựa chọn vị trí hiển thị dữ liệu thông qua gọi tên outlet trong routerLink:

<a [routerLink]="['/', 'posts-list', { outlets: { left: ['post1'] } }]">
Post 1
</a>

Navigating Imperatively

Trong Angular Router có 2 phương thức có sẵn giúp ta điều hướng sử dụng trong component class: Router.navigate và Router.navigateByUrl. Cả 2 phương thức đều cho kết quả trả về là 1 promise.

navigate(commands: any[], extras?: NavigationExtras): Promise<boolean>;

navigateByUrl(url: string | UrlTree, extras?: NavigationExtras): Promise<boolean>;

Bạn có thể truyền một array các đoạn url vào Router.navigate hoặc 1 string vào Router.navigateByUrl, kết quả bạn thu được cũng sẽ tương tự với việc dùng routerLink Để sử dụng 2 phương thức đó, bạn sẽ phải inject Router class vào trong component của bạn :

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  // ...
})
export class AppComponent {

  constructor(private router: Router) {}

  // ...
}

Router.navigate

public nextToPostDetail(url, id) {
    this.router.navigate([url, id]).then( (e) => {
      if (e) {
        console.log("Navigation is successful!");
      } else {
        console.log("Navigation has failed!");
      }
    });
}

Router.navigateByUrl

public nextToPostDetail2(url, id) {

    var myurl = `${url}/${id}`;
    this.router.navigateByUrl(myurl).then(e => {
      if (e) {
        console.log("Navigation is successful!");
      } else {
        console.log("Navigation has failed!");
      }
    });
  }

Kết luận

Ở bài viết này mình đã cùng các bạn đi qua cách chuyển route sử dụng routerLink directive trong HTML Template hay tình huống bạn muốn chuyển route trong component class.
Bạn đã đọc hết bài viết này của mình rồi đấy.
Xin cám ơn !!!
Bạn có thể đọc thêm về các phương thức trong Router class tại https://angular.io/api/router/Router

angular