Angular menggunakan perkhidmatan untuk melaksanakan perkhidmatan tersuai (pemberitahuan)

Artikel ini akan membantu anda meneruskan pembelajaran angular dan mempelajari cara Angular menggunakan perkhidmatan untuk melaksanakan perkhidmatan tersuai (pemberitahuan).

Dalam artikel sebelumnya, kami menyebut:

perkhidmatan bukan sahaja boleh digunakan untuk memproses permintaan API, tetapi juga mempunyai kegunaan lain

Sebagai contoh, pelaksanaan notification yang akan kita bincangkan dalam artikel ini. [Tutorial berkaitan yang disyorkan: "tutorial sudut"] Paparan

adalah seperti berikut:

UI Ini boleh diselaraskan kemudian

Jadi, mari kita pecahkan langkah demi langkah.

Tambah perkhidmatan

Kami menambah app/services fail perkhidmatan dalam notification.service.ts (sila gunakan baris arahan untuk menjananya) dan tambah kandungan berkaitan :

// notification.service.ts

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

// 通知状态的枚举
export enum NotificationStatus {
  Process = "progress",
  Success = "success",
  Failure = "failure",
  Ended = "ended"
}

@Injectable({
  providedIn: 'root'
})
export class NotificationService {

  private notify: Subject<NotificationStatus> = new Subject();
  public messageObj: any = {
    primary: &#39;&#39;,
    secondary: &#39;&#39;
  }

  // 转换成可观察体
  public getNotification(): Observable<NotificationStatus> {
    return this.notify.asObservable();
  }

  // 进行中通知
  public showProcessNotification() {
    this.notify.next(NotificationStatus.Process)
  }

  // 成功通知
  public showSuccessNotification() {
    this.notify.next(NotificationStatus.Success)
  }

  // 结束通知
  public showEndedNotification() {
    this.notify.next(NotificationStatus.Ended)
  }

  // 更改信息
  public changePrimarySecondary(primary?: string, secondary?: string) {
    this.messageObj.primary = primary;
    this.messageObj.secondary = secondary
  }

  constructor() { }
}

Bukankah mudah difahami...

Kami menukar notify menjadi objek yang boleh diperhatikan, dan kemudian menerbitkan pelbagai maklumat status.

Buat komponen

Kami mencipta komponen app/components baharu dalam notification tempat komponen awam disimpan. Jadi anda akan mendapat struktur berikut:

notification                                          
├── notification.component.html                     // 页面骨架
├── notification.component.scss                     // 页面独有样式
├── notification.component.spec.ts                  // 测试文件
└── notification.component.ts                       // javascript 文件

Kami mentakrifkan rangka notification:

<!-- notification.component.html -->

<!-- 支持手动关闭通知 -->
<button (click)="closeNotification()">关闭</button>
<h1>提醒的内容: {{ message }}</h1>
<!-- 自定义重点通知信息 -->
<p>{{ primaryMessage }}</p>
<!-- 自定义次要通知信息 -->
<p>{{ secondaryMessage }}</p>

Seterusnya, kami hanya mengubah suai rangka dan menambah gaya berikut:

// notification.component.scss

:host {
  position: fixed;
  top: -100%;
  right: 20px;
  background-color: #999;
  border: 1px solid #333;
  border-radius: 10px;
  width: 400px;
  height: 180px;
  padding: 10px;
  // 注意这里的 active 的内容，在出现通知的时候才有
  &.active {
    top: 10px;
  }
  &.success {}
  &.progress {}
  &.failure {}
  &.ended {}
}

success, progress, failure, ended Empat nama kelas ini sepadan dengan penghitungan yang ditakrifkan oleh perkhidmatan pemberitahuan Anda boleh menambah gaya berkaitan mengikut pilihan anda sendiri.

Akhir sekali, kami menambah kod javascript gelagat.

// notification.component.ts

import { Component, OnInit, HostBinding, OnDestroy } from '@angular/core';
// 新的知识点 rxjs
import { Subscription } from 'rxjs';
import {debounceTime} from 'rxjs/operators';
// 引入相关的服务
import { NotificationStatus, NotificationService } from 'src/app/services/notification.service';

@Component({
  selector: 'app-notification',
  templateUrl: './notification.component.html',
  styleUrls: ['./notification.component.scss']
})
export class NotificationComponent implements OnInit, OnDestroy {
  
  // 防抖时间，只读
  private readonly NOTIFICATION_DEBOUNCE_TIME_MS = 200;
  
  protected notificationSubscription!: Subscription;
  private timer: any = null;
  public message: string = ''
  
  // notification service 枚举信息的映射
  private reflectObj: any = {
    progress: "进行中",
    success: "成功",
    failure: "失败",
    ended: "结束"
  }

  @HostBinding('class') notificationCssClass = '';

  public primaryMessage!: string;
  public secondaryMessage!: string;

  constructor(
    private notificationService: NotificationService
  ) { }

  ngOnInit(): void {
    this.init()
  }

  public init() {
    // 添加相关的订阅信息
    this.notificationSubscription = this.notificationService.getNotification()
      .pipe(
        debounceTime(this.NOTIFICATION_DEBOUNCE_TIME_MS)
      )
      .subscribe((notificationStatus: NotificationStatus) => {
        if(notificationStatus) {
          this.resetTimeout();
          // 添加相关的样式
          this.notificationCssClass = `active ${ notificationStatus }`
          this.message = this.reflectObj[notificationStatus]
          // 获取自定义首要信息
          this.primaryMessage = this.notificationService.messageObj.primary;
          // 获取自定义次要信息
          this.secondaryMessage = this.notificationService.messageObj.secondary;
          if(notificationStatus === NotificationStatus.Process) {
            this.resetTimeout()
            this.timer = setTimeout(() => {
              this.resetView()
            }, 1000)
          } else {
            this.resetTimeout();
            this.timer = setTimeout(() => {
              this.notificationCssClass = ''
              this.resetView()
            }, 2000)
          }
        }
      })
  }

  private resetView(): void {
    this.message = ''
  }
  
  // 关闭定时器
  private resetTimeout(): void {
    if(this.timer) {
      clearTimeout(this.timer)
    }
  }

  // 关闭通知
  public closeNotification() {
    this.notificationCssClass = ''
    this.resetTimeout()
  }
  
  // 组件销毁
  ngOnDestroy(): void {
    this.resetTimeout();
    // 取消所有的订阅消息
    this.notificationSubscription.unsubscribe()
  }

}

Di sini, kami memperkenalkan titik pengetahuan rxjs RxJS ialah perpustakaan pengaturcaraan reaktif menggunakan Observables, yang membolehkan menulis kod berasaskan tak segerak atau Panggilan Balik. adalah lebih mudah. Ini adalah perpustakaan yang hebat, dan anda akan mengetahui lebih lanjut mengenainya dalam artikel akan datang.

Di sini kita menggunakan fungsi anti goncang debounce Fungsi anti goncang bermakna selepas peristiwa dicetuskan, ia hanya boleh dilaksanakan sekali selepas n saat dalam masa n saat, maka Masa pelaksanaan fungsi akan dikira semula. Ringkasnya: apabila tindakan dicetuskan secara berterusan, hanya kali terakhir dilaksanakan.

ps:

Fungsi pendikit: throttleHadkan fungsi untuk dilaksanakan sekali sahaja dalam tempoh masa tertentu.

Semasa temuduga, penemuduga suka bertanya...

Hubungi

kerana yang ini Untuk perkhidmatan global, kami memanggil komponen ini dalam

: app.component.html

// app.component.html

<router-outlet></router-outlet>
<app-notification></app-notification>

Untuk memudahkan demonstrasi, kami menambah butang dalam

untuk mencetuskan demonstrasi dengan mudah: user-list.component.html

// user-list.component.html

<button (click)="showNotification()">click show notification</button>

pencetus Kod yang berkaitan:

// user-list.component.ts

import { NotificationService } from 'src/app/services/notification.service';

// ...
constructor(
  private notificationService: NotificationService
) { }

// 展示通知
showNotification(): void {
  this.notificationService.changePrimarySecondary('主要信息 1');
  this.notificationService.showProcessNotification();
  setTimeout(() => {
    this.notificationService.changePrimarySecondary('主要信息 2', '次要信息 2');
    this.notificationService.showSuccessNotification();
  }, 1000)
}

Pada ketika ini, kami telah selesai, kami telah berjaya mensimulasikan fungsi

. Kami boleh mengubah suai komponen perkhidmatan yang berkaitan mengikut keperluan sebenar dan menyesuaikannya untuk memenuhi keperluan perniagaan. Jika kami sedang membangunkan sistem untuk kegunaan dalaman, adalah disyorkan untuk menggunakan perpustakaan UI yang matang. Ia telah membantu kami merangkum pelbagai komponen dan perkhidmatan, menjimatkan banyak masa pembangunan. notification

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Angular menggunakan perkhidmatan untuk melaksanakan perkhidmatan tersuai (pemberitahuan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!