วงเล็บและเครื่องหมายดอกจันใน Angular2 แตกต่างกันอย่างไร

ฉันอ่านการอ้างอิงด่วนของ Angular 1 ถึง 2 ในเว็บไซต์ Angularและสิ่งหนึ่งที่ฉันไม่เข้าใจอย่างสมบูรณ์คือความแตกต่างระหว่างอักขระพิเศษเหล่านี้ ตัวอย่างหนึ่งที่ใช้เครื่องหมายดอกจัน:

<tr *ngFor="#movie of movies">
  <td>{{movie.title}}</td>
</tr>

ฉันเข้าใจที่นี่ว่าสัญลักษณ์แฮช (#) กำหนดmovieเป็นตัวแปรเทมเพลตท้องถิ่น แต่เครื่องหมายดอกจันก่อนหน้าngForหมายถึงอะไร และจำเป็นหรือไม่

ถัดไปคือตัวอย่างที่ใช้ตัวยึด:

<a [routerLink]="['Movies']">Movies</a>

ฉันค่อนข้างเข้าใจว่าเครื่องหมายวงเล็บอยู่รอบ ๆrouterLinkผูกกับแอตทริบิวต์ HTML นั้น / คำสั่งเชิงมุม นี่หมายความว่าพวกมันเป็นตัวชี้สำหรับ Angular เพื่อประเมินการแสดงออก? ชอบ[id]="movieId"ที่จะเป็นเทียบเท่าid="movie-{{movieId}}"ในเชิงมุม 1?

ท้ายสุดคือวงเล็บ:

<button (click)="toggleImage($event)">

สิ่งเหล่านี้ใช้สำหรับเหตุการณ์ DOM เท่านั้นและเราสามารถใช้กิจกรรมอื่น ๆ เช่น (load)="someFn()"หรือ(mouseenter)="someFn()"?

ฉันเดาว่าคำถามจริงคือสัญลักษณ์เหล่านี้มีความหมายพิเศษใน Angular 2 และวิธีที่ง่ายที่สุดที่จะรู้ว่าเมื่อใดควรใช้แต่ละอัน ? ขอบคุณ !!

รายละเอียดทั้งหมดสามารถดูได้ที่นี่: https://angular.io/docs/ts/latest/guide/template-syntax.html

• directiveName- เป็นรูปแบบมือสั้นสำหรับคำสั่งโครงสร้างที่สามารถใช้กับ<template>แท็กแบบยาวได้ รูปแบบสั้น implicitely wraps <template>องค์ประกอบที่มันนำไปใช้ใน

• [prop]="value"มีไว้สำหรับการเชื่อมโยงวัตถุกับคุณสมบัติ ( @Input()ขององค์ประกอบเชิงมุมหรือคำสั่งหรือคุณสมบัติขององค์ประกอบ DOM)
  มีรูปแบบพิเศษ:

  • [class.className] ผูกกับคลาส css เพื่อเปิด / ปิดมัน
  • [style.stylePropertyName] เชื่อมโยงกับคุณสมบัติสไตล์
  • [style.stylePropertyName.px] ผูกเข้ากับคุณสมบัติของสไตล์ด้วยหน่วยที่ตั้งไว้ล่วงหน้า
  • [attr.attrName] ผูกค่าให้กับแอตทริบิวต์ (มองเห็นได้ใน DOM ในขณะที่คุณสมบัติไม่สามารถมองเห็นได้)
  • [role.roleName] เชื่อมโยงกับแอ็ตทริบิวต์บทบาท ARIA (ยังไม่พร้อมใช้งาน)

• prop="{{value}}"ผูกค่าให้กับทรัพย์สิน ค่าจะถูกทำให้เป็นสตริง (การแก้ไข aka)

• (event)="expr"ผูกตัวจัดการเหตุการณ์กับเหตุการณ์@Output()หรือ DOM

• #varหรือ#varมีฟังก์ชั่นที่แตกต่างกันขึ้นอยู่กับบริบท

  • ใน*ngFor="#x in y;#i=index"ตัวแปรขอบเขตสำหรับการทำซ้ำจะถูกสร้างขึ้น
    (ในเบต้า 197 สิ่งนี้จะเปลี่ยนเป็น * ngFor = "ให้ x ใน y; ให้ i = index" `)
  • ในองค์ประกอบ DOM <div #mydiv>อ้างอิงถึงองค์ประกอบ
  • ในองค์ประกอบเชิงมุมการอ้างอิงถึงองค์ประกอบ
  • ในองค์ประกอบที่เป็นองค์ประกอบเชิงมุมหรือมีคำสั่งเชิงมุมที่exportAs:"ngForm"มีการกำหนด#myVar="ngForm"สร้างการอ้างอิงถึงองค์ประกอบหรือคำสั่งนี้

[]- การโยงคุณสมบัติ ทางเดียวจากแหล่งข้อมูลเพื่อดูเป้าหมาย เช่น

{{expression}}
[target]="expression"
bind-target="expression"

เราสามารถใช้ bind- แทน []

()-> การเชื่อมโยงเหตุการณ์ ทางเดียวจากเป้าหมายการดูไปยังแหล่งข้อมูล

(target)="statement"
on-target="statement"

เราสามารถใช้ on- แทน ()

[()]-กล้วยผูกสองทางในกล่อง

[(target)]="expression"
bindon-target="expression"

เราสามารถใช้ bindon- แทน [()]

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

วงเล็บคือเหตุการณ์ขององค์ประกอบที่คุณกำลังดำเนินการอยู่เช่นคลิกที่ปุ่มเช่นตัวอย่างของคุณ สิ่งนี้อาจเป็น mousedown, keyup, onselect หรือการกระทำ / เหตุการณ์ใด ๆ สำหรับองค์ประกอบนั้นและสิ่งที่อยู่หลัง=คือชื่อของวิธีการโทร - โดยใช้วงเล็บสำหรับการโทร ควรกำหนดวิธีดังกล่าวในคลาสคอมโพเนนต์ของคุณเช่น:

<element (event)="method()"></element>

วงเล็บทำงานในลักษณะอื่น พวกเขาจะได้รับข้อมูลจากคลาสของคุณ - ตรงข้ามกับวงเล็บที่ส่งเหตุการณ์ - ดังนั้นตัวอย่างทั่วไปคือการใช้สไตล์เช่นนี้:

<element [ngStyle]="{display:someClassVariable}">

ดู? คุณกำลังกำหนดสไตล์ให้กับองค์ประกอบตามโมเดล / คลาสของคุณ

สำหรับสิ่งนี้คุณสามารถใช้ ...

<element style="display:{{ModelVariable}};">

การแนะนำใหม่คือคุณใช้วงเล็บปีกกาคู่สำหรับสิ่งที่คุณจะพิมพ์บนหน้าจอเช่น:

<h1>{{Title}}</h1>

สิ่งที่คุณใช้ถ้าคุณสอดคล้องกันมันจะช่วยให้สามารถอ่านรหัสของคุณได้

สุดท้ายสำหรับ*คำถามของคุณมันเป็นคำอธิบายที่ยาวกว่า แต่มันสำคัญมาก: มันสรุปการใช้วิธีการบางอย่างที่คุณต้องทำเพื่อให้ได้ngForผล

การอัปเดตที่สำคัญอย่างหนึ่งคือในตัวngForคุณจะไม่ใช้แฮชอีกต่อไป คุณต้องใช้letแทนดังนี้:

<tr *ngFor="let movie of movies">
    <td>{{movie.title}}</td>
</tr>

สิ่งสุดท้ายที่ควรค่าแก่การกล่าวถึงคือทั้งหมดที่กล่าวมาข้างต้นมีผลกับส่วนประกอบของคุณเช่นถ้าคุณสร้างวิธีการในองค์ประกอบของคุณมันจะถูกเรียกโดยใช้():

<my-owncomponent 
    (onSearched)="MethodToCall()" 
    [MyInputData]="SearchParamsArray"></my-owncomponent>