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

ในบทความก่อนหน้านี้ เราได้ให้ภาพรวมของ Angular แล้ว ในส่วนของคำสั่งแบบกำหนดเองนั้น เราสามารถเขียนคำสั่งเหล่านั้นได้ แต่ในสถานการณ์จริง เรายังต้องมีการจัดการที่เป็นมาตรฐาน

Angular เป็นเวอร์ชันอัปเกรดของ Angular.js [บทช่วยสอนที่เกี่ยวข้องที่แนะนำ: "บทช่วยสอนเชิงมุม"]

ดังนั้น ในบทความนี้ เราจะใช้ Tooltip เพื่ออธิบายเนื้อหาของคำแนะนำที่กำหนดเอง

การเรนเดอร์ออนไลน์ดังต่อไปนี้:

โครงสร้างไดเร็กทอรี

ขึ้นอยู่กับโครงการโค้ดที่ใช้ในบทความก่อนหน้านี้ ดำเนินการบรรทัดคำสั่ง:

# ป้อนคำสั่งโฟลเดอร์ $ cd

#สร้างโฟลเดอร์คำแนะนำเครื่องมือ$ mkdir tooltip

# เข้าสู่โฟลเดอร์คำแนะนำเครื่องมือ $ cd tooltip

# สร้างส่วนประกอบคำแนะนำเครื่องมือ $ ng สร้างคำแนะนำเครื่องมือส่วนประกอบ

# สร้างคำสั่งคำแนะนำเครื่องมือ $ ng สร้างคำแนะนำเครื่องมือคำสั่ง

หลังจากดำเนินการบรรทัดคำสั่งข้างต้น คุณจะได้รับโครงสร้างไดเร็กทอรีไฟล์ของ app/directive/tooltip ดังนี้:

คำแนะนำเครื่องมือ
├── tooltip // ส่วนประกอบคำแนะนำเครื่องมือ │ ├── user-list.component.html // โครงกระดูกของหน้า │ ├── user-list.component.scss // ลักษณะเฉพาะของหน้า │ ├── user-list.component .ts // ไฟล์ทดสอบ │ └── user-list.component.ts // ไฟล์ javascript ├── tooltip.directive.spec.ts // ไฟล์ทดสอบ └── tooltip.directive.ts // ไฟล์คำสั่ง เอา

ล่ะ ที่นี่ ฉันวางองค์ประกอบไว้ที่ระดับเดียวกับ tooltip เพื่ออำนวยความสะดวกในการจัดการเป็นหลัก แน่นอนว่าสิ่งนี้แตกต่างกันไปในแต่ละคน คุณสามารถใส่ไว้ในโฟลเดอร์ components สาธารณะได้

เขียนส่วนประกอบคำแนะนำเครื่องมือ

ในไฟล์ html :

<div class="caret"></div>
<div class="tooltip-content">{{data.content}}</div>

ในไฟล์สไตล์ .scss มี:

$black: #000000;
$สีขาว: #ffffff;
$caret ขนาด: 6px;
$tooltip-bg: transparentize($black, 0.25); // transparentize เป็นไวยากรณ์ของ sass $grid-gutter-width: 30px;
$body-bg-สี: $white;
$app-anim-time: 200ms;
$ app-anim-curve: คลายออก;
$std-เส้นขอบรัศมี: 5px;
$zindex-สูงสุด: 100;

// :host ตัวเลือกคลาสหลอก กำหนดสไตล์สำหรับองค์ประกอบส่วนประกอบเอง: โฮสต์ {
  ตำแหน่ง: คงที่;
  ช่องว่างภายใน: $grid-gutter-width/3 $grid-gutter-width/2;
  สีพื้นหลัง: $tooltip-bg;
  สี: $body-bg-color;
  ความทึบ: 0;
  การเปลี่ยนแปลง: $app-anim-time $app-anim-curve ทั้งหมด;
  การจัดแนวข้อความ: กึ่งกลาง;
  รัศมีเส้นขอบ: $std-border-radius;
  ดัชนี z: $zindex-สูงสุด;
-

.caret { // ความกว้างคาเร็ต: 0;
  ความสูง: 0;
  ขอบซ้าย: โปร่งใสทึบ 6px;
  เส้นขอบขวา: โปร่งใสทึบ 6px;
  ขอบล่าง: 6px solid $tooltip-bg;
  ตำแหน่ง: แน่นอน;
  ด้านบน: -$caret ขนาด;
  ซ้าย: 50%;
  ขอบซ้าย: -$caret-size/2;
  ขอบล่างสี: $tooltip-bg;
}

อืม~ css เป็นสิ่งมหัศจรรย์ และฉันจะจัดเรียงบทความเพื่ออธิบายเนื้อหาที่เกี่ยวข้องกับ sass ...

จากนั้น เนื้อหาของไฟล์ javascript tooltip.component.ts จะเป็นดังนี้:

import { 
  ส่วนประกอบ, 
  ElementRef //องค์ประกอบชี้ไปที่ HostBinding 
  ออนทำลาย, 
  OnInit 
} จาก '@เชิงมุม/แกน';

@ส่วนประกอบ({
  ตัวเลือก: 'app-tooltip', // Identifier ระบุว่าส่วนประกอบของฉันเรียกว่าอะไร นี่คือ app-tooltip
  templateUrl: './tooltip.component.html', // โครงสร้างของ styleUrls ของคอมโพเนนต์นี้: ['./tooltip.component.scss'] // สไตล์ส่วนตัวของคอมโพเนนต์นี้})
คลาสส่งออก TooltipComponent ใช้ OnInit {

  ข้อมูลสาธารณะ: ใด ๆ; // กำหนดค่าให้กับคำสั่ง displayTimeOut ส่วนตัว: ใด ๆ;

  // มัณฑนากรที่เกี่ยวข้องกับการเชื่อมโยงโฮสต์ของส่วนประกอบเอง @HostBinding('style.top') hostStyleTop!: string;
  @HostBinding('style.left') hostStyleLeft!: string;
  @HostBinding('style.opacity') hostStyleOpacity!: string;

  ตัวสร้าง (
    องค์ประกอบส่วนตัว Ref: ElementRef
  -

  ngOnInit(): เป็นโมฆะ {
    this.hostStyleTop = this.data.elementPosition.bottom + 'px';

    ถ้า (this.displayTimeOut) {
      clearTimeout (this.displayTimeOut)
    -

    this.displayTimeOut = setTimeout((_: ใด ๆ ) => {
      // คำนวณระยะห่างระหว่างคำแนะนำเครื่องมือและด้านซ้ายที่นี่ สูตรการคำนวณคือ: tooltip.left + .width ขององค์ประกอบเป้าหมาย - (tooltip.width/2)
      this.hostStyleLeft = this.data.elementPosition.left + this.data.element.clientWidth / 2 - this.elementRef.nativeElement.clientWidth / 2 + 'px'
      this.hostStyleOpacity = '1';
      this.hostStyleTop = this.data.elementPosition.bottom + 10 + 'px'
    }, 500)
  -
  
  
  // ส่วนประกอบถูกทำลาย ngOnDestroy() {
    // หลังจากที่ส่วนประกอบถูกทำลาย ให้ล้างตัวจับเวลาเพื่อป้องกันหน่วยความจำรั่วถ้า (this.displayTimeOut) {
      clearTimeout (this.displayTimeOut)
    -
  -
}

การเขียนคำแนะนำคำแนะนำเครื่องมือ

เป็นจุดสำคัญของบทความนี้ ฉันจะทำเครื่องหมายคำแนะนำเฉพาะบนโค้ด ~

เนื้อหาของไฟล์ tooltip.directive.ts มีดังนี้:

import { 
  ApplicationRef, // การตรวจจับการโทรทั่วโลก ComponentFactoryResolver, // สร้างวัตถุส่วนประกอบ ComponentRef, // การเชื่อมโยงและคำแนะนำของอินสแตนซ์ส่วนประกอบ, ชี้ไปที่องค์ประกอบที่สร้างโดย ComponentFactory Directive, ElementRef, 
  EmbeddedViewRef, // EmbeddedViewRef สืบทอดมาจาก ViewRef และใช้เพื่อแสดงองค์ประกอบ UI ที่กำหนดไว้ในองค์ประกอบเทมเพลต
  HostListener, // เหตุการณ์ DOM กำลังฟังหัวฉีด, // อินพุตการฉีดการพึ่งพา 
} จาก '@เชิงมุม/แกน';

นำเข้า { TooltipComponent } จาก './tooltip/tooltip.component';

@คำสั่ง({
  ตัวเลือก: '[คำแนะนำเครื่องมือแอป]'
-
ส่งออกคำแนะนำเครื่องมือคลาส {
  @Input("appTooltip") appTooltip!: string;

  องค์ประกอบส่วนตัว Ref!: ComponentRef <TooltipComponent>;

  // รับตำแหน่งสัมพัทธ์ขององค์ประกอบเป้าหมาย เช่น ซ้าย ขวา บน ล่าง
  รับ elementPosition() {
    ส่งคืน this.elementRef.nativeElement.getBoundingClientRect(); 
  -

  ตัวสร้าง (
    ป้องกัน elementRef: ElementRef,
    appRef ที่มีการป้องกัน: ApplicationRef,
    ป้องกันส่วนประกอบFactoryResolver: ComponentFactoryResolver,
    หัวฉีดที่ได้รับการป้องกัน: หัวฉีด
  -

  //สร้างคำแนะนำเครื่องมือ
  ป้องกัน createTooltip() {
    this.componentRef = this.componentFactoryResolver
      .resolveComponentFactory(TooltipComponent) // ผูกคำแนะนำเครื่องมือcomponent.create(this.injector);

    this.componentRef.instance.data = { // ผูกเนื้อหาข้อมูลข้อมูล: this.appTooltip,
      องค์ประกอบ: this.elementRef.nativeElement
      elementPosition: this.elementPosition
    -

    this.appRef.attachView(this.componentRef.hostView); //เพิ่มมุมมอง const domElem = (this.componentRef.hostView เป็น EmbeddedViewRef<any>).rootNodes[0] เป็น HTMLElement;
    document.body.appendChild(domElem);
  -
  
  // ลบคำแนะนำเครื่องมือ
  ป้องกัน destroyTooltip() {
    ถ้า (this.componentRef) {
      this.appRef.detachView(this.componentRef.hostView); // ลบมุมมอง this.componentRef.destroy();
    -
  -
  
  // ฟังการเคลื่อนไหวของเมาส์ไปที่ @HostListener('mouseover')
  OnEnter() {
    this.createTooltip();
  -
    
  // ฟังการเคลื่อนไหวของเมาส์ out@HostListener('mouseout')
  เปิดออก() {
    this.destroyTooltip();
  -

}

ณ จุดนี้ 99% ของฟังก์ชั่นเสร็จสมบูรณ์แล้ว ตอนนี้เราสามารถเรียกมันได้บนหน้า

ในหน้านี้ เราโทรหา

เราเพื่อเพิ่มเนื้อหาต่อไปนี้ใน user-list.component.html :

<p style="margin-top: 100px;">
  <!-- [appTooltip]="'Hello Jimmy'" คือประเด็นสำคัญ-->
  <ช่วง 
    [appTooltip]="'สวัสดีจิมมี่'" 
    style="margin-left: 200px; width: 160px; text-align: center; padding: 20px 0; display: inline-block; border: 1px solid #999;"
  >จิมมี่</span>
</p>

เราได้ประกาศคำสั่ง TooltipDirective บน app.module.ts และเราสามารถเรียกมันได้โดยตรง ผลกระทบในปัจจุบันมีดังนี้:

tooltip ที่เรานำไปใช้จะแสดงที่กึ่งกลางด้านล่าง ซึ่งเป็นสิ่งที่เรามักจะใช้เฟรมเวิร์ก เช่น คุณลักษณะ bottom ของ tooltip ใน angular ant design สำหรับคุณลักษณะอื่นๆ หากผู้อ่านสนใจก็สามารถขยายได้

ณ จุดนี้ เราสามารถรักษาไฟล์คำสั่งที่เราเขียนไว้ได้เป็นอย่างดี