Bài 02:Vòng đời trang(Angular)

  

Hướng dẫn này trình bày cách hoạt động của vòng đời trang trong một ứng dụng được xây dựng bằng Ionic và Angular.

Sự kiện vòng đời Angular

Ionic bao hàm các sự kiện trong vòng đời do Angular cung cấp. Hai sự kiện Angular bạn sẽ thấy sử dụng nhiều nhất là:

Tên sự kiện	Sự miêu tả
ngOnInit	Được kích hoạt một lần trong quá trình khởi tạo thành phần. Sự kiện này có thể được sử dụng để khởi tạo các thành viên cục bộ và thực hiện các cuộc gọi vào các dịch vụ chỉ cần thực hiện một lần.
ngOnDestroy	Kích hoạt ngay trước khi Angular phá hủy chế độ xem. Hữu ích cho việc dọn dẹp như hủy đăng ký khỏi các trang có thể quan sát.

Sự kiện trên trang ionic

Ngoài các sự kiện trong vòng đời Angular, Ionic Angular cung cấp một số sự kiện bổ sung mà bạn có thể sử dụng:

Tên sự kiện	Sự miêu tả
ionViewWillEnter	Được kích hoạt khi thành phần định tuyến tới sắp chuyển động sang chế độ xem.
ionViewDidEnter	Được kích hoạt khi định tuyến thành phần đến đã hoàn tất quá trình tạo hoạt ảnh.
ionViewWillLeave	Kích hoạt khi thành phần định tuyến từ sắp hoạt động.
ionViewDidLeave	Được kích hoạt khi định tuyến thành phần đến đã hoàn tất quá trình tạo hoạt ảnh.

Sự khác biệt giữa ionViewWillEntervà ionViewDidEnterlà khi chúng khai hỏa. Phần trước kích hoạt ngay sau ngOnInitnhưng trước khi quá trình chuyển đổi trang bắt đầu và phần sau kích hoạt ngay sau khi quá trình chuyển đổi kết thúc.

Đối với ionViewWillLeavevà ionViewDidLeave, ionViewWillLeaveđược gọi trực tiếp trước khi quá trình chuyển đổi khỏi trang hiện tại bắt đầu và ionViewDidLeavekhông được gọi cho đến sau khi trang mới được chuyển đổi thành công vào (sau khi các trang mới ionViewDidEnterkích hoạt).

 

How ionic Handles the life of a page

Ionic có ổ cắm bộ định tuyến, được gọi là <ion-router-outlet />. Cửa hàng này mở rộng Angular's <router-outlet />với một số chức năng bổ sung để mang lại trải nghiệm tốt hơn cho các thiết bị di động.
Khi một ứng dụng được bao bọc <ion-router-outlet />, Ionic xử lý điều hướng hơi khác một chút. Khi bạn điều hướng đến một trang mới, Ionic sẽ giữ trang cũ trong DOM hiện có, nhưng ẩn nó khỏi chế độ xem của bạn và chuyển sang trang mới. Lý do chúng tôi làm điều này là gấp đôi:
1) Chúng tôi có thể duy trì trạng thái của trang cũ (dữ liệu trên màn hình, vị trí cuộn, v.v.)
2) Chúng tôi có thể cung cấp quá trình chuyển đổi trở lại trang mượt mà hơn vì nó đã ở đó và không cần phải tạo lại.
Các trang chỉ bị xóa khỏi DOM khi chúng được "xuất hiện", chẳng hạn như bằng cách nhấn nút quay lại trong giao diện người dùng hoặc nút quay lại của trình duyệt.
Do cách xử lý đặc biệt này, các phương thức ngOnInitvà ngOnDestroyphương thức có thể không kích hoạt khi bạn thường nghĩ rằng chúng nên làm như vậy.
ngOnInitsẽ chỉ kích hoạt mỗi khi trang được tạo mới, nhưng không kích hoạt khi được điều hướng trở lại trang. Ví dụ: điều hướng giữa mỗi trang trong giao diện tab sẽ chỉ gọi ngOnInitphương thức của mỗi trang một lần, nhưng không gọi cho các lần truy cập tiếp theo. ngOnDestroysẽ chỉ kích hoạt khi một trang "xuất hiện".

Route Guards

Trong Ionic 3, có một số phương pháp vòng đời bổ sung hữu ích để kiểm soát thời điểm một trang có thể được nhập ( ionViewCanEnter) và rời khỏi ( ionViewCanLeave). Chúng có thể được sử dụng để bảo vệ các trang khỏi người dùng trái phép và giữ người dùng trên trang khi bạn không muốn họ rời đi (như khi điền biểu mẫu).
Các phương pháp này đã bị loại bỏ trong Ionic 4 để chuyển sang sử dụng Hệ thống Bảo vệ Tuyến đường của Angular.
Bộ bảo vệ tuyến đường giúp xác định xem liệu một hành động cụ thể có thể được thực hiện đối với một tuyến đường hay không. Chúng là các lớp thực thi một giao diện nhất định. Các giao diện CanActivatevà CanDeactivatecó thể được sử dụng để triển khai cùng một loại logic mà các sự kiện đã loại bỏ ionViewCanEntervà ionViewCanLeaveđã thực hiện.

  @Injectable()

export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

    return this.authService.isAuthenticated();

  }

}

Để sử dụng bảo vệ này, hãy thêm nó vào tham số thích hợp trong định nghĩa tuyến đường:

 { path: 'settings', canActivate: [AuthGuard], loadChildren: '...',  }

 Guidance for each life cycle method

Dưới đây là một số mẹo về các trường hợp sử dụng cho từng sự kiện trong vòng đời.

    ngOnInit - Khởi tạo thành phần của bạn và tải dữ liệu từ các dịch vụ không cần làm mới trong mỗi lần truy cập tiếp theo.
    ionViewWillEnter- Vì ionViewWillEnterđược gọi mỗi khi khung nhìn được điều hướng đến (bất kể có được khởi tạo hay không), nên đó là một phương pháp tốt để tải dữ liệu từ các dịch vụ. Tuy nhiên, nếu dữ liệu của bạn quay trở lại trong quá trình hoạt ảnh, nó có thể bắt đầu nhiều thao tác DOM, điều này có thể gây ra một số hoạt ảnh vui nhộn.
    ionViewDidEnter- Nếu bạn thấy các vấn đề về hiệu suất do sử dụng ionViewWillEnterkhi tải dữ liệu, bạn có thể thực hiện các cuộc gọi dữ liệu của mình ionViewDidEnterthay thế. Tuy nhiên, sự kiện này sẽ không kích hoạt cho đến khi người dùng nhìn thấy trang, vì vậy bạn có thể muốn sử dụng chỉ báo tải hoặc màn hình khung để nội dung không hiển thị tự nhiên sau khi quá trình chuyển đổi hoàn tất.
    ionViewWillLeave- Có thể được sử dụng để dọn dẹp, như hủy đăng ký khỏi các trang có thể quan sát. Vì ngOnDestroycó thể không kích hoạt khi bạn điều hướng từ trang hiện tại, hãy đặt mã dọn dẹp của bạn ở đây nếu bạn không muốn nó hoạt động khi màn hình không ở chế độ xem.
    ionViewDidLeave - Khi sự kiện này kích hoạt, bạn biết rằng trang mới đã được chuyển đổi hoàn toàn, vì vậy bất kỳ logic nào bạn có thể không thực hiện thường khi chế độ xem được hiển thị đều có thể xuất hiện ở đây.
    ngOnDestroy- Logic dọn dẹp cho các trang mà bạn không muốn dọn dẹp ionViewWillLeave.

Điều hướng

Angular Router là một trong những thư viện quan trọng nhất trong ứng dụng Angular. Nếu không có nó, các ứng dụng sẽ là một chế độ xem / ứng dụng ngữ cảnh đơn lẻ hoặc sẽ không thể duy trì trạng thái điều hướng của chúng khi tải lại trình duyệt. Với Angular Router, chúng ta có thể tạo các ứng dụng phong phú có thể liên kết và có nhiều hình ảnh động (tất nhiên là khi được ghép nối với Ionic). Chúng ta hãy xem xét những điều cơ bản về Angular Router và cách chúng ta có thể cấu hình nó cho các ứng dụng Ionic.

A simple route

Đối với hầu hết các ứng dụng, thường phải có một số loại lộ trình. Cấu hình cơ bản nhất trông giống như sau:
 

  import { RouterModule } from '@angular/router';

 

  @NgModule({

    imports: [

    ...

    RouterModule.forRoot([

      { path: '', component: LoginComponent },

      { path: 'detail', component: DetailComponent },

    ])

    ],

  })

Phân tích đơn giản nhất cho những gì chúng ta có ở đây là tra cứu đường dẫn / thành phần. Khi ứng dụng của chúng tôi tải, bộ định tuyến sẽ khởi động mọi thứ bằng cách đọc URL mà người dùng đang cố tải. Trong mẫu của chúng tôi, tuyến đường của chúng tôi tìm kiếm '', về cơ bản là tuyến chỉ mục của chúng tôi. Vì vậy, đối với điều này, chúng tôi tải LoginComponent. Khá đơn giản. Mô hình kết hợp các đường dẫn với một thành phần này tiếp tục cho mọi mục nhập chúng ta có trong cấu hình bộ định tuyến. Nhưng điều gì sẽ xảy ra nếu chúng ta muốn tải một đường dẫn khác trong lần tải ban đầu?

Handing Redirects

Đối với điều này, chúng tôi có thể sử dụng chuyển hướng bộ định tuyến. Chuyển hướng hoạt động giống như cách mà một đối tượng định tuyến điển hình làm, nhưng chỉ bao gồm một vài khóa khác nhau.

 [

    { path: '', redirectTo: 'login', pathMatch: 'full' },

    { path: 'login', component: LoginComponent },

    { path: 'detail', component: DetailComponent }

  ];

Trong chuyển hướng của chúng tôi, chúng tôi tìm kiếm đường dẫn chỉ mục của ứng dụng của chúng tôi. Sau đó, nếu chúng tôi tải nó, chúng tôi chuyển hướng đến logintuyến đường. Chìa khóa cuối cùng pathMatchlà cần thiết để cho bộ định tuyến biết cách nó tìm kiếm đường dẫn.
Vì chúng tôi sử dụng full, chúng tôi đang nói với bộ định tuyến rằng chúng tôi nên so sánh đường dẫn đầy đủ, ngay cả khi kết thúc là một cái gì đó như thế nào /route1/route2/route3. Có nghĩa là nếu chúng ta có:

 { path: '/route1/route2/route3', redirectTo: 'login', pathMatch: 'full' },

  { path: 'login', component: LoginComponent },

Và tải, /route1/route2/route3chúng tôi sẽ chuyển hướng. Nhưng nếu chúng tôi đã tải /route1/route2/route4, chúng tôi sẽ không chuyển hướng, vì các đường dẫn không khớp hoàn toàn.
Ngoài ra, nếu chúng tôi sử dụng:

 { path: '/route1/route2', redirectTo: 'login', pathMatch: 'prefix' },

  { path: 'login', component: LoginComponent },

Sau đó tải cả hai /route1/route2/route3và /route1/route2/route4, chúng tôi sẽ được chuyển hướng cho cả hai tuyến đường. Điều này là do pathMatch: 'prefix'sẽ chỉ khớp với một phần của đường dẫn.

Navigating to defferent routers

Nói về các tuyến đường là tốt và tất cả, nhưng làm thế nào một người thực sự điều hướng đến các tuyến đường đã nói? Đối với điều này, chúng ta có thể sử dụng routerLinkchỉ thị. Hãy quay lại và thực hiện thiết lập bộ định tuyến đơn giản của chúng tôi từ trước:

 RouterModule.forRoot([

    { path: '', component: LoginComponent },

    { path: 'detail', component: DetailComponent }

  ]);

Bây giờ từ LoginComponent, chúng ta có thể sử dụng HTML sau để điều hướng đến tuyến đường chi tiết.

 <ion-header>

  <ion-toolbar>

    <ion-title>Login</ion-title>

  </ion-toolbar>

</ion-header>

 

<ion-content class="ion-padding">

  <ion-button [routerLink]="['/detail']">Go to detail</ion-button>

</ion-content>

Phần quan trọng ở đây là ion-buttonvà routerLinkchỉ thị. RouterLink hoạt động trên một ý tưởng tương tự như các hrefs điển hình , nhưng thay vì xây dựng URL dưới dạng chuỗi, nó có thể được xây dựng dưới dạng một mảng, có thể cung cấp các đường dẫn phức tạp hơn.
Chúng tôi cũng có thể điều hướng theo chương trình trong ứng dụng của mình bằng cách sử dụng API bộ định tuyến.

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

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

   

  @Component({

    ...

  })

  export class LoginComponent {

   

    constructor(private router: Router){}

   

    navigate(){

      this.router.navigate(['/detail'])

    }

}

Cả hai tùy chọn đều cung cấp cơ chế điều hướng giống nhau, chỉ phù hợp với các trường hợp sử dụng khác nhau.
Lưu ý về điều hướng với URL tương đối: Hiện tại, để hỗ trợ nhiều ngăn xếp điều hướng, URL tương đối không được hỗ trợ

Lazy loading routes

Bây giờ, cách thiết lập các tuyến đường hiện tại của chúng tôi khiến chúng được đưa vào cùng một đoạn với app.module gốc, điều này không phải là lý tưởng. Thay vào đó, bộ định tuyến có một thiết lập cho phép các thành phần được tách biệt thành các phần riêng của chúng.

  import { RouterModule } from '@angular/router';

  @NgModule({

    imports: [

    ...

    RouterModule.forRoot([

      { path: '', redirectTo: 'login', pathMatch: 'full' },

      { path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginModule) },

      { path: 'detail', loadChildren: () => import('./detail/detail.module').then(m => m.DetailModule) }

    ])

    ],

  })

Trong khi tương tự, thuộc loadChildrentính là một cách để tham chiếu đến một mô-đun bằng cách sử dụng nhập gốc thay vì một thành phần trực tiếp. Tuy nhiên, để làm được điều này, chúng ta cần tạo một mô-đun cho từng thành phần....

  import { RouterModule } from '@angular/router';

  import { LoginComponent } from './login.component';

  @NgModule({

    imports: [

    ...

    RouterModule.forChild([

      { path: '', component: LoginComponent },

    ])

    ],

  })

Chúng tôi đang loại trừ một số nội dung bổ sung và chỉ bao gồm những phần cần thiết.
Ở đây, chúng tôi có thiết lập Mô-đun Angular điển hình, cùng với nhập RouterModule, nhưng chúng tôi hiện đang sử dụng forChildvà khai báo thành phần trong thiết lập đó. Với thiết lập này, khi chúng tôi chạy bản dựng của mình, chúng tôi sẽ tạo ra các phần riêng biệt cho cả thành phần ứng dụng, thành phần đăng nhập và thành phần chi tiết.

Working with Tabs

Với Tabs, Angular Router cung cấp cho Ionic cơ chế để biết những thành phần nào nên được tải, nhưng việc nâng nặng thực sự được thực hiện bởi thành phần tab. Hãy xem một ví dụ đơn giản.

 const routes: Routes = [

    {

      path: 'tabs',

      component: TabsPage,

      children: [

        {

          path: 'tab1',

          children: [

            {

              path: '',

              loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)

            }

          ]

        },

        {

          path: '',

          redirectTo: '/tabs/tab1',

          pathMatch: 'full'

        }

      ]

    },

    {

      path: '',

      redirectTo: '/tabs/tab1',

      pathMatch: 'full'

    }

  ];

  

Ở đây chúng tôi có một đường dẫn "tab" mà chúng tôi tải. Trong ví dụ này, chúng tôi gọi đường dẫn là "tab", nhưng tên của đường dẫn có thể được thay đổi. Chúng có thể được gọi là bất cứ thứ gì phù hợp với ứng dụng của bạn. Trong đối tượng route đó, chúng ta cũng có thể định nghĩa một route con. Trong ví dụ này, tuyến con cấp cao nhất "tab1" đóng vai trò là "cửa hàng" của chúng tôi và có thể tải các tuyến con bổ sung. Đối với ví dụ này, chúng tôi có một tuyến con con duy nhất, chỉ tải một thành phần mới. Đánh dấu cho tab như sau:

 <ion-tabs>

 

  <ion-tab-bar slot="bottom">

 

    <ion-tab-button tab="tab1">

      <ion-icon name="flash"></ion-icon>

      <ion-label>Tab One</ion-label>

    </ion-tab-button>

 

  </ion-tab-bar>

 

</ion-tabs>

Nếu bạn đã xây dựng ứng dụng với Ionic trước đây, điều này sẽ cảm thấy quen thuộc. Chúng tôi tạo một ion-tabsthành phần và cung cấp một ion-tab-bar. Các ion-tab-barcung cấp một ion-tab-buttonvới một tabtài sản đó được kết hợp với tab "đại lý" trong cấu hình router. Lưu ý rằng phiên bản mới nhất của @ionic/angularkhông còn yêu cầu nữa <ion-tab>mà thay vào đó cho phép các nhà phát triển tùy chỉnh hoàn toàn thanh tab và nguồn sự thật duy nhất nằm trong cấu hình bộ định tuyến.