แฮชแท็ก Angular 2 ในเทมเพลตหมายถึงอะไร

ฉันกำลังทำงานกับ angular 2 และฉันพบบางอย่างเช่น

<input #searchBox (keyup)="search(searchBox.value)"

และใช้งานได้

แต่ผมไม่เข้าใจความหมายของ#searchBox ฉันไม่พบสิ่งใดที่ชัดเจนทั้งในเอกสาร

ใครช่วยอธิบายให้ฉันฟังหน่อยได้ไหมว่ามันทำงานอย่างไร

เป็นไวยากรณ์ที่ใช้ในระบบเทมเพลต Angular 2 ซึ่งประกาศองค์ประกอบ DOM เป็นตัวแปร

ฉันให้ URL เทมเพลตองค์ประกอบของฉันที่นี่:

import {Component} from 'angular2/core';

@Component({
   selector: 'harrys-app',
   templateUrl: 'components/harry/helloworld.component.html'
})

export class HarrysApp {}

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

# - การประกาศตัวแปร

() - การผูกเหตุการณ์

[] - ทรัพย์สินที่มีผลผูกพัน

[()] - การผูกทรัพย์สินสองทาง

{{ }} - การแก้ไข

* - คำสั่งโครงสร้าง

#ไวยากรณ์สามารถประกาศชื่อตัวแปรท้องถิ่นซึ่งอ้างอิง DOM วัตถุในแม่แบบ เช่น

 <span [hidden]="harry.value">*</span>
 <input type="text" #harry>
 {{ harry.value }}

เมื่อคุณตั้งค่า #searchBox นี้คุณจะได้รับข้อมูลนี้ใน typescript ของคุณเช่น

    @ViewChild('searchBox') searchBox;
    console.info(searchBox.nativeElement.value)

แก้ไข

เพิ่มตัวอย่าง: https://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview

จากangulartraining.com :

ตัวแปรอ้างอิงเทมเพลตเป็นอัญมณีเล็ก ๆ ที่ช่วยให้ทำสิ่งดีๆมากมายด้วย Angular ฉันมักจะเรียกคุณลักษณะนั้นว่า "ไวยากรณ์ของแฮชแท็ก" เพราะมันต้องอาศัยแฮชแท็กง่ายๆในการสร้างการอ้างอิงถึงองค์ประกอบในเทมเพลต:

<input #phone placeholder="phone number">

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

นี่คือวิธีที่ฉันสามารถใช้การอ้างอิงเพื่อรับค่าของอินพุตตัวอย่างเช่น:

<!-- phone refers to the input element --> 
<button (click)="callPhone(phone.value)">Call</button>

โปรดทราบว่า  โทรศัพท์  หมายถึง  HtmlElementตัวอย่างวัตถุสำหรับ  การป้อนข้อมูล เป็นผลให้  โทรศัพท์  มีคุณสมบัติและวิธีการทั้งหมดของ HTMLElement (id, ชื่อ, innerHTML, ค่า ฯลฯ )

ข้างต้นเป็นวิธีที่ดีในการหลีกเลี่ยงการใช้ ngModel หรือการผูกข้อมูลประเภทอื่น ๆ ในรูปแบบง่ายๆที่ไม่ต้องการการตรวจสอบความถูกต้องมากนัก

---

สิ่งนี้ใช้ได้กับส่วนประกอบหรือไม่

คำตอบคือใช่!

... ส่วนที่ดีที่สุดคือเราได้รับการอ้างอิงถึงอินสแตนซ์ส่วนประกอบจริง HelloWorldComponent ดังนั้นเราจึงสามารถเข้าถึงเมธอดหรือคุณสมบัติของส่วนประกอบนั้น ๆ ได้ (แม้ว่าจะประกาศว่าเป็นส่วนตัวหรือได้รับการปกป้องก็ตามซึ่งน่าแปลกใจ) :

@Component({
  selector: 'app-hello',
  // ...

export class HelloComponent {
   name = 'Angular';
}

[... ]

<app-hello #helloComp></app-hello>

<!-- The following expression displays "Angular" -->
{{helloComp.name}}

มันสร้างตัวแปรเทมเพลตที่อ้างอิง

• inputองค์ประกอบถ้าองค์ประกอบเป็นองค์ประกอบ DOM ธรรมดา
• ส่วนประกอบหรืออินสแตนซ์คำสั่งหากเป็นองค์ประกอบที่มีส่วนประกอบหรือคำสั่ง
• ส่วนประกอบหรือคำสั่งเฉพาะบางอย่างหากใช้เช่น#foo="bar"เมื่อbarใด

@Directive({ // or @Component
  ...
  exportAs: 'bar'
})

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

@ViewChild('searchBox') searchBox:HTMLInputElement;