Các định nghĩa services trong Angular tham khảo chia sẽ cho từng components sử dụng lại.

Ví dụ 1: Cập nhật một Component không cần tải lại toàn bộ trang với – Angular

Tôi có một cấu trúc HTML như sau với các selector

<app-header></app-header> 
<router-outlet></router-outlet>
<app-footer></app-footer>

Làm cách nào tôi có thể cập nhật/làm mới app-header component, không cần tải toàn bộ trang lại?

Tôi muốn ẩn liên kết “Đăng nhập” trong header khi người dùng đã đăng nhập thành công. Tiêu đề này phổ biến trong tất cả các components/routes.

Giải pháp

Bạn có thể dùng BehaviorSubject cho giao tiếp giữa các thành phần (components) xuyên suốt ứng dụng. Bạn có thể xác định dịch vụ chia sẻ dữ liệu có chứa BehaviorSubject mà bạn có thể đăng ký và đưa ra các thay đổi.

1. Định nghĩa một data sharing service

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class DataSharingService {
    public isUserLoggedIn: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
}
 

2. Import dịch vụ (service) với class DataSharingService vào AppModule providers entry.

3. Import DataSharingService vào <app-header> và trong component nơi bạn muốn ẩn khi sign in. Trong <app-header> đăng ký các thay đổi đối với chủ đề isUserLoggedIn:

import { DataSharingService } from './data-sharing.service';

export class AppHeaderComponent { 
    // Define a variable to use for showing/hiding the Login button
    isUserLoggedIn: boolean;

    constructor(private dataSharingService: DataSharingService) {

        // Subscribe here, this will automatically update 
        // "isUserLoggedIn" whenever a change to the subject is made.
        this.dataSharingService.isUserLoggedIn.subscribe( value => {
            this.isUserLoggedIn = value;
        });
    }
}

4. Trong <app-header> html template, bạn cần thêm điều kiện *ngIf

<button *ngIf="!isUserLoggedIn">Login</button> 
<button *ngIf="isUserLoggedIn">Sign Out</button>

5. Cuối cùng, bạn chỉ cần phát (emmit) ra sự kiện khi người dùng đã đăng nhập, ví dụ::

someMethodThatPerformsUserLogin() {
    // Some code 
    // .....
    // After the user has logged in, emit the behavior subject changes.
    this.dataSharingService.isUserLoggedIn.next(true);
}

Đã đăng trong Angular, Code Snippets.