Angular ใช้บริการเพื่อใช้บริการที่กำหนดเอง (การแจ้งเตือน)

ในบทความก่อนหน้านี้ เราได้กล่าวถึงว่า

บริการไม่เพียงแต่สามารถใช้เพื่อประมวลผลคำขอ API เท่านั้น แต่ยังมีประโยชน์อื่นๆ ด้วย

เช่น การใช้งาน notification ที่เราจะพูดถึงในบทความนี้ [บทช่วยสอนที่เกี่ยวข้องที่แนะนำ: "บทช่วยสอนเชิงมุม"]

การเรนเดอร์มีดังนี้:

UI สามารถปรับเปลี่ยนได้ในภายหลัง

ดังนั้นเรามาดูรายละเอียดทีละขั้นตอนกัน

ในการเพิ่มบริการ

เราจะเพิ่มไฟล์บริการ notification.service.ts ใน app/services (โปรดใช้บรรทัดคำสั่งเพื่อสร้าง) และเพิ่มเนื้อหาที่เกี่ยวข้อง:

// alert.service.ts

นำเข้า { ฉีดได้ } จาก '@ เชิงมุม/แกน';
นำเข้า { สังเกตได้ หัวเรื่อง } จาก 'rxjs';

// การแจงนับสถานะการแจ้งเตือน ส่งออก enum สถานะการแจ้งเตือน {
  กระบวนการ = "ความคืบหน้า"
  ความสำเร็จ = "ความสำเร็จ",
  ความล้มเหลว = "ความล้มเหลว",
  สิ้นสุดแล้ว = "สิ้นสุดแล้ว"
-

@ฉีด({
  ให้ไว้ใน: 'ราก'
-
บริการแจ้งเตือนคลาสส่งออก {

  แจ้งส่วนตัว: เรื่อง <NotificationStatus> = เรื่องใหม่ ();
  ข้อความสาธารณะObj: any = {
    หลัก: '',
    รอง: ''
  -

  // แปลงเป็น getNotification สาธารณะที่สังเกตได้ (): Observable<NotificationStatus> {
    กลับ this.notify.asObservable();
  -

  // อยู่ระหว่างดำเนินการแจ้งเตือน public showProcessNotification() {
    this.notify.next (สถานะการแจ้งเตือน กระบวนการ)
  -

  // การแจ้งเตือนความสำเร็จสาธารณะ showSuccessNotification() {
    this.notify.next (สถานะการแจ้งเตือนความสำเร็จ)
  -

  //สิ้นสุดการแจ้งเตือนสาธารณะ showEndedNotification() {
    this.notify.next (สถานะการแจ้งเตือนสิ้นสุด)
  -

  // เปลี่ยนข้อมูล public changePrimarySecondary(primary?: string, Secondary?: string) {
    this.messageObj.primary = หลัก;
    this.messageObj.secondary = รอง
  -

  ตัวสร้าง () { }
}

เข้าใจง่ายไหม...

เราเปลี่ยน notify ให้เป็นวัตถุที่สังเกตได้ แล้วเผยแพร่ข้อมูลสถานะต่างๆ

ในการสร้างส่วนประกอบ

เราจะสร้างส่วนประกอบ notification ใหม่ใน app/components ซึ่งเป็นที่จัดเก็บส่วนประกอบสาธารณะ ดังนั้นคุณจะได้รับโครงสร้างดังต่อไปนี้:

การแจ้งเตือน                                          
├── alert.component.html // โครงกระดูกของหน้า ├── alert.component.scss // สไตล์ที่ไม่ซ้ำของหน้า ├── alert.component.spec.ts // ไฟล์ทดสอบ └── alert.component.ts // ใน ไฟล์จาวาสคริปต์

ที่เรากำหนดโครงกระดูกของ notification :

<!-- alert.component.html -->

<!--รองรับการปิดการแจ้งเตือนด้วยตนเอง-->
<button (click)="closeNotification()">ปิด</button>
<h1>เนื้อหาเตือนความจำ: {{ ข้อความ }}</h1>
<!-- ปรับแต่งข้อมูลการแจ้งเตือนที่สำคัญ-->
<p>{{ ข้อความหลัก }}</p>
<!-- ปรับแต่งข้อมูลการแจ้งเตือนรอง-->
<p>{{ SecondaryMessage }}</p>

ต่อไป เราเพียงแก้ไขโครงกระดูกและเพิ่มสไตล์ต่อไปนี้:

// alert.component.scss

:เจ้าภาพ {
  ตำแหน่ง: คงที่;
  ด้านบน: -100%;
  ขวา: 20px;
  สีพื้นหลัง: #999;
  เส้นขอบ: 1px ทึบ #333;
  รัศมีเส้นขอบ: 10px;
  ความกว้าง: 400px;
  ความสูง: 180px;
  ช่องว่างภายใน: 10px;
  // ให้ความสนใจกับเนื้อหาที่ใช้งานที่นี่ จะปรากฏเฉพาะเมื่อมีการแจ้งเตือนปรากฏขึ้น
    ด้านบน: 10px;
  -
  &.ความสำเร็จ{}
  &.ความคืบหน้า {}
  &.ความล้มเหลว {}
  &.สิ้นสุด {}
}

ชื่อสี่คลาสของ success, progress, failure, ended สอดคล้องกับการแจงนับที่กำหนดโดยบริการการแจ้งเตือน คุณสามารถเพิ่มสไตล์ที่เกี่ยวข้องได้ตามความต้องการของคุณเอง

ในที่สุด เราก็เพิ่มโค้ด javascript สคริปต์เชิงพฤติกรรม

// การแจ้งเตือนส่วนประกอบ.ts

นำเข้า { ส่วนประกอบ, OnInit, HostBinding, OnDestroy } จาก '@ เชิงมุม/core';
// จุดความรู้ใหม่ rxjs
นำเข้า { การสมัครสมาชิก } จาก 'rxjs';
นำเข้า {debounceTime} จาก 'rxjs/ตัวดำเนินการ';
// แนะนำบริการที่เกี่ยวข้องนำเข้า { NotificationStatus, NotificationService } จาก 'src/app/services/notification.service';

@ส่วนประกอบ({
  ตัวเลือก: 'การแจ้งเตือนแอป',
  templateUrl: './notification.component.html',
  styleUrls: ['./notification.component.scss']
-
ส่งออกคลาส NotificationComponent ใช้ OnInit, OnDestroy {
  
  // เวลาป้องกันการสั่นไหว, อ่านอย่างเดียวส่วนตัวแบบอ่านอย่างเดียว NOTIFICATION_DEBOUNCE_TIME_MS = 200;
  
  การแจ้งเตือนที่ได้รับการป้องกันการสมัครสมาชิก!: การสมัครสมาชิก;
  ตัวจับเวลาส่วนตัว: ใด ๆ = null;
  ข้อความสาธารณะ: string = ''
  
  // การแมปบริการแจ้งเตือนของข้อมูลการแจงนับ privateflectObj: any = {
    ความคืบหน้า: "อยู่ระหว่างดำเนินการ",
    ความสำเร็จ: "ความสำเร็จ"
    ความล้มเหลว: "ความล้มเหลว",
    สิ้นสุด: "สิ้นสุด"
  -

  @HostBinding('class') การแจ้งเตือน CssClass = '';

  ข้อความหลักสาธารณะ!: สตริง;
  ข้อความรองสาธารณะ!: สตริง;

  ตัวสร้าง (
    บริการแจ้งเตือนส่วนตัว: บริการแจ้งเตือน
  -

  ngOnInit(): เป็นโมฆะ {
    นี้.init()
  -

  สาธารณะ init() {
    //เพิ่มข้อมูลการสมัครสมาชิกที่เกี่ยวข้อง this.notificationSubscription = this.notificationService.getNotification()
      .ท่อ(
        debounceTime (นี้.NOTIFICATION_DEBOUNCE_TIME_MS)
      -
      .subscribe((notificationStatus: สถานะการแจ้งเตือน) => {
        ถ้า (สถานะการแจ้งเตือน) {
          นี้.resetTimeout();
          //เพิ่มรูปแบบที่เกี่ยวข้อง this.notificationCssClass = `active ${ alertStatus }`
          this.message = this.reflectObj [สถานะการแจ้งเตือน]
          // รับข้อความหลักที่กำหนดเอง this.primaryMessage = this.notificationService.messageObj.primary;
          // รับข้อมูลรองที่กำหนดเอง this.secondaryMessage = this.notificationService.messageObj.secondary;
          ถ้า (notificationStatus === สถานะการแจ้งเตือน กระบวนการ) {
            นี้.resetTimeout()
            this.timer = setTimeout(() => {
              นี้.resetView()
            }, 1,000)
          } อื่น {
            นี้.resetTimeout();
            this.timer = setTimeout(() => {
              this.notificationCssClass = ''
              นี้.resetView()
            }, 2000)
          -
        -
      -
  -

  รีเซ็ตส่วนตัว (): เป็นโมฆะ {
    นี้.ข้อความ = ''
  -
  
  // ปิดตัวจับเวลาส่วนตัวรีเซ็ตหมดเวลา (): เป็นโมฆะ {
    ถ้า (this.timer) {
      clearTimeout (this.timer)
    -
  -

  // ปิดการแจ้งเตือน public closeNotification() {
    this.notificationCssClass = ''
    นี้.resetTimeout()
  -
  
  // ส่วนประกอบถูกทำลาย ngOnDestroy(): เป็นโมฆะ {
    นี้.resetTimeout();
    //ยกเลิกข้อความการสมัครสมาชิกทั้งหมด this.notificationSubscription.unsubscribe()
  -

}

ที่นี่ เราจะแนะนำจุดความรู้ของ rxjs RxJS คือไลบรารีการเขียนโปรแกรมแบบโต้ตอบโดยใช้ Observables ซึ่งช่วยให้เขียนโค้ดแบบอะซิงโครนัสหรือแบบเรียกกลับได้ง่ายขึ้น นี่เป็นห้องสมุดที่ยอดเยี่ยม และคุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับเรื่องนี้ในบทความสองสามบทความถัดไป

ที่นี่เราใช้ฟังก์ชัน debounce anti -shake ฟังก์ชัน anti-shake หมายความว่าหลังจากเหตุการณ์ถูกทริกเกอร์ จะสามารถดำเนินการได้เพียงครั้งเดียวหลังจาก n วินาที หากเหตุการณ์ถูกทริกเกอร์อีกครั้งภายใน n วินาที เวลาดำเนินการของฟังก์ชันจะเป็น คำนวณใหม่ พูดง่ายๆ ก็คือ เมื่อมีการกระตุ้นการกระทำอย่างต่อเนื่อง จะมีการดำเนินการเฉพาะครั้งสุดท้ายเท่านั้น

PS: throttle ฟังก์ชันควบคุมปริมาณ: จำกัดฟังก์ชันที่จะดำเนินการเพียงครั้งเดียวภายในระยะเวลาหนึ่ง

ระหว่างการสัมภาษณ์ ผู้สัมภาษณ์ชอบถาม...

การโทร

เนื่องจากเป็นบริการระดับโลก เราจึงเรียก Component นี้ใน app.component.html :

// app.component.html

<เราเตอร์-เต้าเสียบ></เราเตอร์-เต้าเสียบ>
<app-notification></app-notification>

เพื่ออำนวยความสะดวกในการสาธิต เราได้เพิ่มปุ่มใน user-list.component.html เพื่อให้ทริกเกอร์การสาธิตได้อย่างง่ายดาย:

// user-list.component.html

<button (click)="showNotification()">คลิกแสดงการแจ้งเตือน</button>

ทริกเกอร์รหัสที่เกี่ยวข้อง:

// user-list.component.ts

นำเข้า { NotificationService } จาก 'src/app/services/notification.service';

-
ตัวสร้าง (
  บริการแจ้งเตือนส่วนตัว: บริการแจ้งเตือน
-

//แสดงการแจ้งเตือน showNotification(): เป็นโมฆะ {
  this.notificationService.changePrimarySecondary('ข้อมูลหลัก 1');
  this.notificationService.showProcessNotification();
  setTimeout(() => {
    this.notificationService.changePrimarySecondary('ข้อมูลหลัก 2', 'ข้อมูลรอง 2');
    this.notificationService.showSuccessNotification();
  }, 1,000)
}

ณ จุดนี้ เราทำเสร็จแล้ว เราได้จำลองฟังก์ชัน notification สำเร็จแล้ว เราสามารถปรับเปลี่ยนส่วนประกอบบริการที่เกี่ยวข้องได้ตามความต้องการที่แท้จริงและปรับแต่งให้ตรงตามความต้องการทางธุรกิจ หากเรากำลังพัฒนาระบบสำหรับการใช้งานภายใน ขอแนะนำให้ใช้ไลบรารี UI ที่ครบถ้วน ซึ่งช่วยให้เราสรุปส่วนประกอบและบริการต่างๆ ได้มาก ซึ่งช่วยประหยัดเวลาในการพัฒนาได้มาก