Angular2에서 괄호, 괄호 및 별표의 차이점은 무엇입니까?

Angular2에서 괄호, 괄호 및 별표의 차이점은 무엇입니까?

Angular 웹사이트에서 Angular 1~2 빠른 참조를 읽고 있는데, 한 가지 완전히 이해하지 못한 것은 이 특별한 문자들의 차이였습니다.별표를 사용하는 예:

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

해시(#) 기호가 정의하는 것은 다음과 같습니다.movie로, " " " " 앞에 을 합니까?ngFor비열하다고? 그리고, 그것이 꼭 필요한가요?

다음은 대괄호를 사용하는 예입니다.

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

저는 주변의 괄호가routerLink해당 HTML 특성/Angular 디렉티브에 바인딩합니다.이것은 그것들이 식을 평가하기 위한 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>된 을 그태로 으로 감쌉니다. 짧은 형식은 요소가 적용된 곳을 암시적으로 감싼다.<template>.

• [prop]="value" 바인딩을 것입니다.@Input()DOM 요소의 속성, 즉 Angular 구성 요소, 지시 또는 속성의.
  다음과 같은 특수한 형식이 형식은 다음과 같습니다.

  • [class.className]비활성화합니다. CSS 클사사용/함용안
  • [style.stylePropertyName].
  • [style.stylePropertyName.px] 된 단위로 .
  • [attr.attrName]값을 속성에 바인딩(DOM에는 표시되지만 속성은 표시되지 않음)
  • [role.roleName]ARIA 역할 특성에 바인딩(아직 사용할 수 없음)

• prop="{{value}}"값을 속성에 바인딩합니다.값이 문자열화됨(보간이라고도 함)

• (event)="expr"를 이트처 에바니다합에 .@Output() DOM 는 DOM 이벤트입니다.

• #var또는#var.

  • 인안 *ngFor="#x in y;#i=index"반복에 대한 범위 변수가 생성됩니다.
    에서는 * x y i=로되었습니다.)
  • 요소 DOM에서<div #mydiv>에
  • Angular 구성 요소에서 구성 요소에 대한 참조
  • Angular 구성요소이거나 Angular 방향이 있는 요소에서 다음과 같은 경우exportAs:"ngForm"정의됨,#myVar="ngForm"이 구성 요소 또는 지시어에 대한 참조를 만듭니다.

[] 속성 바인딩 데이터 원본에서 보기 대상까지의 단방향입니다.예를 들어

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

대신 bind-를 사용할 수 있습니다.[]

() -> 이벤트 바인딩 뷰 대상에서 데이터 소스로의 단방향

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

() 대신 on-을 사용할 수 있습니다.

[()]상자 안에서 바나나를 두 방향으로 묶는 것.

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

대신에 bindon-을 사용할 수 있습니다.[()]

이미 언급했듯이 Angular 문서, 특히 "영웅 튜토리얼"은 이를 더 깊이 설명합니다.당신이 그것을 확인하고 싶다면 여기 링크가 있습니다.

괄호는 예제와 같은 단추 클릭과 같은 작업 중인 요소의 이벤트입니다. 이는 마우스다운, 키업, 선택 시 또는 해당 요소에 대한 모든 작업/이벤트 및 다음 작업일 수도 있습니다.=호출할 메서드의 이름입니다. 호출에 괄호 사용.이 메서드는 구성 요소 클래스에 정의되어야 합니다. 즉, 다음과 같습니다.

<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>

언급URL : https://stackoverflow.com/questions/35944749/what-is-the-difference-between-parentheses-brackets-and-asterisks-in-angular2