알림 서비스 구현 및 사용

이 게시물에서는 앱의 다른 페이지 또는 사용 사례에서 사용할 수 있는 알림 Angular 서비스를 구현할 수 있는 한 가지 방법을 볼 것입니다.

우리 서비스에서 일하기 전에 무엇이 필요합니까?

이 예제는 Angular 14 및 RXjs 6에서 수행되었습니다

.

알림 구성 요소를 노출할 공유 모듈을 만들어야 합니다. 공유 모듈은 app.module.ts 파일에 포함된 모듈이라는 점을 기억하세요. 이렇게 하면 앱 전체에서 모듈을 사용할 수 있습니다.

import { SharedModule } from './shared/shared.module';

@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        AppRoutingModule,
        SharedModule,
        BrowserAnimationsModule,
    ],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

CLI를 통해 서비스 생성

첫 번째 단계는 단순히 다음 명령으로 서비스를 생성하는 것입니다.

ng g s shared/services/notification

원하는 위치에 서비스를 배치할 수 있습니다. 제 경우에는 서비스가 앱의 다른 모듈에서 사용할 수 있는 원칙을 따르기 때문에 공유 폴더를 선택했습니다.

알림 서비스 구현

Typescript 원칙을 위해 우리는 서비스를 통해 "이동"할 알림 객체를 입력하기 위한 인터페이스를 사용할 것입니다.

export enum NotificationType {
  success = 'is-success',
  danger = 'is-danger',
  warning = 'is-warning',
}

export interface MaNotification {
  title: string;
  message: string;
  type: NotificationType;
}

간단하게 알림 개체에는 제목, 메시지 및 유형이 있습니다.

이제 알림 인터페이스를 가져오고 서비스를 구현해 보겠습니다.

import { Injectable } from '@angular/core';
import { ReplaySubject } from 'rxjs';
import { MaNotification } from 'src/app/models/notification.model';

@Injectable({
    providedIn: 'root',
})
export class NotificationService {
    private notifyRequest = new ReplaySubject<MaNotification>();

    notifyRequest$ = this.notifyRequest.asObservable();

    constructor() {}

    notify(notification: MaNotification) {
        this.notifyRequest.next(notification);
    }
}

그래서 우리는 여기서 무엇을 봅니까?

제공된 속성이 있는 Injectable 주석이 표시됩니다. 이 설정을 통해 앱 전체에서 서비스를 사용할 수 있습니다.

우리는 notifyRequest라는 개인 속성이 있음을 확인했습니다. 이것은 ReplaySubject 객체입니다(ReplaySubject는 관찰 가능 항목이며 구독한 관찰자에게 값을 내보내거나 보냅니다)

.

다른 속성도 볼 수 있는데 이 속성은 비공개가 아닙니다. 이 속성은 새 값을 수신했을 때 반응하기 위해 알림 구성 요소에서 사용할 관찰 가능 항목입니다(나중에 살펴보겠습니다).

마지막으로 알림 방법이 표시됩니다. 이 메서드는 알림 표시에 관심이 있는 서비스 소비자가 사용할 예정입니다(나중에 살펴보겠습니다).

CLI를 통해 구성 요소 생성

분명히 알림은 시각적이어야 합니다. 따라서 다음과 같이 구성 요소를 만듭니다.

ng g s shared/component/notification

구성 요소가 생성되면 소비자(구성 요소와 같은 앱의 다른 부분)가 사용할 수 있도록 해야 합니다. 다음과 같이 공유 모듈의 내보내기 배열에 구성 요소를 추가하여 이를 수행합니다.

import { NotificationComponent } from './components/notification/notification.component';

@NgModule({
    declarations: [NotificationComponent,],
    // providers, imports go here
    exports: [NotificationComponent],
})
export class SharedModule {}

물론 공유 모듈에는 더 많은 항목/코드가 포함됩니다. 여기서는 알림 구현과 연결된 코드에 초점을 맞추고 있습니다.

컴포넌트를 구현하기 전에 이전에 NotificationType을 생성한 enum을 기억하십시오. 이러한 enum의 값은 머티리얼 디자인 css 라이브러리의 클래스에 맞습니다.

이제 다음과 같이 컴포넌트 로직을 구현합니다.

import { Component, OnInit } from '@angular/core';
import { debounceTime, map, tap } from 'rxjs/operators';
import {
    MaNotification,
    NotificationType,
} from 'src/app/models/notification.model';

//Importing our notification service
import { NotificationService } from '../../services/notification/notification.service';

@Component({
    selector: 'ma-notification',
    templateUrl: './notification.component.html',
    styleUrls: ['./notification.component.scss'],
})
export class NotificationComponent implements OnInit {
    //Flag that is going to be used in the view to determine if the notification should be visible or not.
    showNotification: boolean = false;

//Notification object with the data that is going to be showed.
    incommingNotification: MaNotification = {
        title: '',
        message: '',
        type: NotificationType.danger,
    };

    constructor(private notificationService: NotificationService) {}

    ngOnInit(): void {
       //We subscribe or listens to new values / notification requests.
        this.notificationService.notifyRequest$
            .pipe(
//we receive new notification and update the values of the notification object we have in this component.
// we alse make the notification visible.
                tap((notification: MaNotification) => {
                    this.incommingNotification = notification;
                    this.showNotification = true;
                }),
//we wait for 3 seconds before updating the visibility of the notification
                debounceTime(3000),
//3 seconds later, we make our notification invisible again and ready for the value.
                tap(() => {
                    this.showNotification = false;
                })
            )
            .subscribe();
    }

완벽합니다. 이제 구성 요소의 시각적 부분을 살펴보겠습니다.

<div
    [class.is-visible-notification]="showNotification"
    class="ma-notification"
    [class]="incommingNotification.type"
>
    <h3 class="ma-notification-title">
        {{ incommingNotification.title }}
    </h3>
    <p class="ma-notification-paragraph">{{ incommingNotification.message }}</p>
</div>

간단하죠?

css 클래스를 통해 가시성을 제어하고 incommingNotification.type이 클래스의 값을 설정하는 것을 볼 수 있습니다. 이러한 값은 머티리얼 디자인 내장 클래스에 맞고 그런 식으로 색상을 설정합니다. MD를 사용하지 않는 경우 색상을 div로 설정하는 CSS 클래스("위험"클래스, "경고"클래스 등)를 설정하기만 하면 됩니다.

그러나이 서비스를 사용하는 방법은 무엇입니까?

가상의 로그인 구성 요소 페이지에서 사용합니다.

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

import { NotificationType } from 'src/app/models/notification.model';
import { NotificationService } from 'src/app/shared/services/notification/notification.service';
import { LoginRequest } from '../../../shared/services/user/user.model';
import { UserService } from '../../../shared/services/user/user.service';

const { home } = environment.pages;

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss'],
})
export class LoginComponent implements OnInit {
    constructor(
        private notificationService: NotificationService
    ) {
    }

    ngOnInit(): void {}

    async handleSubmit(loginRequest: LoginRequest): Promise<void> {
        const signInRes = await this.userService.authenticate(loginRequest);
        if (signInRes.error) {
            this.notificationService.notify({
                title: 'Oh Oh 😕',
                type: NotificationType.danger,
                message: signInRes.error.message,
            });
        }
    }
}