Angular2 FlashBoxComponent

แอปพลิเคชันตัวอย่างส่วนประกอบ Angular2-Flashbox

ส่วนประกอบแฟลชบ็อกซ์เป็นส่วนประกอบ Angular2 ที่มีให้เพื่อแสดงข้อความข้อมูลผู้ใช้อย่างง่าย

โครงกระดูกแอปพลิเคชันที่ใช้สำหรับการพัฒนาสามารถพบได้ที่นี่ Angular2 - Skeleton แอปพลิเคชัน

ข้อกำหนดเบื้องต้น

ต้องติดตั้งโหนดและ NPM

วิธีเริ่มแอปพลิเคชัน

ติดตั้งการพึ่งพาโหนดในไดเรกทอรีรูทโครงการของคุณ (นี่คือที่ที่ไฟล์ 'package.json' อยู่) โดยใช้:

$ npm install

ติดตั้งคำจำกัดความ typeScript โดยใช้:

$ typings install

เริ่มแอปพลิเคชันด้วย

$ gulp

แอปพลิเคชันจะถูกรวบรวมและเริ่มต้น โดยค่าเริ่มต้นเซิร์ฟเวอร์กำลังฟังอยู่ที่พอร์ต 3000 แอปพลิเคชันสามารถเข้าถึงได้ผ่านเว็บเบราว์เซอร์ของคุณบน URL LocalHost: 3000

วิธีใช้ส่วนประกอบแฟลชบ็อกซ์

ส่วนประกอบแฟลชบ็อกซ์เป็นส่วนหนึ่งของโมดูล CommonComponents

ในการใช้โมดูลคุณต้องกำหนดค่าโมดูลโหลดเดอร์ของคุณ ในกรณีที่คุณใช้ตัวโหลดโมดูล SystemJS เพิ่มแผนที่ต่อไปนี้:

 System.config({
    ...
    map: {
        'commoncomponents': 'node_modules/commoncomponents'
    }
    ...
})

ในโมดูลคำจำกัดความโมดูลแอปพลิเคชันของคุณนำเข้าโมดูล CommonComponents

 ... 
Import { CommonComponentsModule} from '/commoncomponents/commoncomponents.module';
...
@NgModule({
    ...
     imports:      [ CommonComponentsModule ],
    ...
})

ตอนนี้เราสามารถใช้ส่วนประกอบแฟลชบ็อกซ์ในโมดูลที่ประกาศเทมเพลตส่วนประกอบโดยใช้องค์ประกอบ

วางข้อความข้อมูลผู้ใช้ที่ใช้ HTML ไว้ในองค์ประกอบ แฟลชกล่อง

 <flash-box>
        <!-- Message -->
</flash-box> 

อินพุต

คุณลักษณะ

    <flash-box [type]="type_value" [position]="position_value" [max-width]="maxwidth_value" [setTimeout]="setTimeout_value>
        HTML message
    </flash-box>    

การกระทำ

1. ประเภท: สตริง , ค่าเริ่มต้น: ประเภทหลัก ระบุประเภทของกล่องแฟลช ประเภทที่มีอยู่: ค่าเริ่มต้น , หลัก , ความสำเร็จ , ข้อมูล , คำเตือน , อันตราย ตามประเภทฉลาก bootstrap เริ่มต้น

2. ตำแหน่ง: สตริง , ค่าเริ่มต้น: tr ระบุตำแหน่งของกล่องแฟลช ค่าที่มีอยู่:

• TR - ด้านบนขวา
• TM - ปานกลางด้านบน
• TL - ด้านบนซ้าย
• CR - ศูนย์ขวา
• CM - กลางกลาง
• CL - กึ่งกลางซ้าย
• BR - ด้านล่างขวา
• BM - กลางกลาง
• BL - ด้านล่างซ้าย

3. ความกว้างสูงสุด: สตริง , ค่าเริ่มต้น: 300px ระบุความกว้างสูงสุดของส่วนประกอบกล่องแฟลช

4. หมายเลข settimeout , ค่าเริ่มต้น: 2000 ระบุการหมดเวลา (จำนวน MS การควบคุมสามารถมองเห็นได้) ใน MS ค่าเริ่มต้นคือ 2 วินาที

การกระทำ

เพื่อให้เกิดการดำเนินการควบคุมแฟลชบ็อกซ์ให้ใช้เทมเพลตเทมเพลต Local Template

ตัวอย่างแม่แบบ

    <flash-box .... #tlv_name>
        ....
    </flash-box>
    
    <button (click)="tlv_name.available_action">Cause flashbox action</button>

ตัวอย่างคอนโทรลเลอร์

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

 import { FlashBoxComponent } from 'commoncomponents/components/flashbox.component';

ส่วนประกอบอ้างอิงจากตัวแปรโลคัลเทมเพลตโดยใช้

 @ViewChild("tlv_name") tlv:FlashBoxComponent;
tlv_name.available_action();

การดำเนินการที่มีอยู่:

1. FlashOnce (): void - แสดงแฟลชบ็อกซ์เพียงครั้งเดียวสำหรับระยะเวลา การตั้งถิ่นฐาน
2. แสดง (): โมฆะ - ทำให้การควบคุมมองเห็นได้ไม่ จำกัด ระยะเวลา (หรือจนกว่าจะมีการกระทำอื่น ๆ เกิดขึ้น)
3. ซ่อน (): เป็นโมฆะ - ทำการควบคุมที่ซ่อนอยู่ในช่วงเวลาที่ไม่ จำกัด (หรือจนกว่าจะมีการกระทำอื่น ๆ เกิดขึ้น)
4. startflashing (): เป็นโมฆะ - เริ่มกระพริบในเวลาไม่ จำกัด (หรือจนกว่าจะมีการกระทำอื่น ๆ เกิดขึ้น) ระยะเวลาการเปลี่ยนแปลงจากการไม่สามารถมองเห็นได้เป็น 0,5 วินาที และปัจจุบันไม่สามารถกำหนดค่าได้ แฟลชบ็อกซ์ควบคุมเราแสดงตามระยะเวลา การตั้งถิ่นฐาน
5. StopFlashing (): เป็นโมฆะ - หยุดกระพริบ