วิธีสร้างกล่องโต้ตอบการแจ้งเตือนแบบกำหนดเองทั่วไปโดยใช้วัสดุเชิงมุมและเชิงมุม

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

ฉันเล่นกับ Angular และ Angular Material มาเกือบ 2 เดือนแล้ว เมื่อเดือนที่แล้ว พวกเขาทำให้ฉันพังจริงๆ ด้วยการทำลายโค้ดบางส่วนของฉันในเวอร์ชันล่าสุด อย่าเริ่มพูดถึงดิ้น ดูเหมือนจะไม่สามารถพันหัวฉันได้ แต่มีเพียงสิ่งนี้เกี่ยวกับกรอบงานนี้ที่คุณรักและเกลียด ประการแรก การใช้กล่องโต้ตอบวัสดุเชิงมุมนั้นง่ายต่อการเข้าใจ

ฉันทำงานมาหลายปีโดยอาศัยกล่องข้อความของ Windows เพื่อแจ้งเตือนอะไรก็ได้ โทรง่ายและได้ผลลัพธ์ง่าย นี่คือรหัส C# เพื่อแสดงกล่องข้อความ

string message = "Do you want to abort this operation?";
string title = "Close Window";
MessageBoxButtons buttons = MessageBoxButtons.AbortRetryIgnore;
 
DialogResult result = MessageBox.Show(message, title, buttons,
                        MessageBoxIcon.Warning);

โอ้ ฉันคิดถึงวัน WinForms แต่สิ่งต่างๆ ก็ต้องดำเนินต่อไป ดังนั้นฉันจึงพยายามเลียนแบบสไตล์การโทรใน Angular เพื่อแสดงกล่องการแจ้งเตือนที่กำหนดเอง นี่คือตัวอย่างการโทรของฉันเพื่อแสดงกล่องการแจ้งเตือน

MessageBox.show(this.dialog, this.message, this.title,        
                this.information, this.button,
                this.allow_outside_click, this.style,
                this.width)
    .subscribe( result => {
        console.log(result);
    });

MessageBox.show(this.dialog, `The result is : ${response}`);
MessageBox.show(this.dialog, `Hello, World!`);

นี่คือการดำเนินการของฉัน อาจไม่ใช่แนวทางที่หรูหราหรือมีประสิทธิภาพมากที่สุด แต่ให้สิ่งที่ฉันต้องการ อย่างไรก็ตาม ซอร์สโค้ดมีอยู่ที่ GitHub

ส่วนประกอบ

ฉันสร้างองค์ประกอบหนึ่งสำหรับ MessageBox UI มีสองสไตล์ให้เลือก: เต็มและเรียบง่าย องค์ประกอบ UI แสดงไว้ด้านล่าง

ตัวเลือกการกำหนดค่า:

• ชื่อเรื่อง — ข้อความที่แสดงในแถบหัวเรื่องของกล่องโต้ตอบ โดยค่าเริ่มต้นจะเป็น "การแจ้งเตือน" หากไม่ได้ระบุไว้ แถบหัวเรื่องจะแสดงเฉพาะเมื่อตั้งค่าสไตล์เป็น "เต็ม" เท่านั้น
• ข้อความ — ข้อความหลักที่จะแสดงต่อผู้ใช้
• ข้อมูล — ข้อมูลเพิ่มเติมที่จะแสดง
• ปุ่ม — ประเภทของปุ่มที่จะแสดง ในปัจจุบัน รองรับเฉพาะรายการต่อไปนี้: OK, OK/CANCEL, YES/NO, ACCEPT/REJECT
• อนุญาตให้คลิกด้านนอกเพื่อปิด — อนุญาตให้ผู้ใช้เพียงคลิกที่ภูมิภาคใดก็ได้ในหน้าจอนอกกล่องโต้ตอบเพื่อปิด ตามค่าเริ่มต้น ผู้ใช้จะต้องคลิกที่ปุ่มเพื่อเริ่มการปิด
• สไตล์ — กำหนดสไตล์สำหรับกล่องโต้ตอบ รองรับสองสไตล์: เต็มและเรียบง่าย
• ความกว้าง — ความกว้างของกล่องโต้ตอบ

ส่วนประกอบ DialogBox ไม่มีตรรกะที่ซับซ้อนอยู่เบื้องหลัง ได้รับการออกแบบมาเพื่อแสดงข้อความและตอบกลับผู้ใช้ เมื่อผู้ใช้คลิกปุ่ม ให้ปิด UI และส่งคืนผลลัพธ์

onOk() {
  this.dialogRef.close({result: "ok"});
}
onCancel() {
  this.dialogRef.close({result: "cancel"});
}

คลาสแบบคงที่ของ MessageBox

ฉันใช้คลาสคงที่เพื่อเลียนแบบการโทร C# บริการจะต้องมีการใช้งานที่ดีกว่า แต่ฉันเลือกใช้บริการที่ง่ายกว่า ปัญหาเดียวที่ฉันมีในแนวทางนี้คือคลาสแบบคงที่ไม่สามารถใช้ประโยชน์จาก Dependency Injection ได้ ดังนั้น คุณจะสังเกตเห็นว่าฉันต้องส่งวัตถุ MatDialog เป็นพารามิเตอร์

export class MessageBox {
  static show(dialog: MatDialog, message, title = "Alert",                    
              information = "", button = 0, 
              allow_outside_click = false, 
              style = 0, width = "200px") {
    const dialogRef = dialog.open( SimpleDialogComponent, {        
          data: {
                  title: title || "Alert",
                  message: message,
                  information: information,
                  button: button || 0,
                  style: style || 0,
                  allow_outside_click: allow_outside_click || false
          },
          width: width
    });    
    return dialogRef.afterClosed();     
  }
}

โปรดสังเกตว่าการตอบสนองจะถูกส่งกลับเป็นแบบสังเกตได้ ผู้บริโภคในคลาสนี้จำเป็นต้องสมัครสมาชิกเพื่อรับการตอบกลับที่แท้จริง

บริการข้อความ

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

@Injectable()
export class MessageService {
  private message = new Subject<any>();
  constructor() { }
  // the type can be used in case you want to classify the alert
  sendMessage(message: string, type = 1) { 
     this.message.next({text: message, type: type});
  }
  getMessage(): Observable<any> {
    return this.message.asObservable();
  }
  clearMessage() {
    this.message.next();
  }
}

วิธีใช้กล่องข้อความ

เราสามารถเรียกเมธอด MessageBox.show() ได้โดยตรงบนโค้ดของคุณ

MessageBox.show(this.dialog, this.message, this.title,        
                this.information, this.button,
                this.allow_outside_click, this.style,
                this.width)
    .subscribe( result => {
        console.log(result);
    });

หรือหากต้องการใช้บริการส่งข้อความ

onSendService() {
  this.messageService.sendMessage(this.message);
}

เพียงให้แน่ใจว่าคุณได้สมัครใช้บริการ

this.subscriber = this.messageService.getMessage()
  .subscribe(message => {
    MessageBox.show(this.dialog, message.text);
});

หากคุณอาจมีความคิดเห็นหรือข้อเสนอแนะเกี่ยวกับวิธีแก้ปัญหา โปรดกดที่ช่องแสดงความคิดเห็น ขอให้มีความสุขในการเขียนโค้ด!

โพสต์นี้ได้รับการอัปเดตเมื่อวันที่ 11 ธันวาคม 2017 เพื่อเพิ่มการใช้งานบริการข้อความ

บทความนี้ถูกโพสต์บน บล็อกส่วนตัว ของฉันด้วย

หากโพสต์นี้ช่วยคุณได้ โปรดคลิกปุ่มตบมือ 👏 ด้านล่างสองสามครั้งเพื่อแสดงการสนับสนุนของคุณ!