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()Angular 구성 요소 또는 지시문 또는 DOM 요소의 속성)에 대한 개체 바인딩을위한 것 입니다.
  특별한 형태가 있습니다 :

  • [class.className] CSS 클래스에 바인딩하여 활성화 / 비활성화합니다.
  • [style.stylePropertyName] 스타일 속성에 바인딩
  • [style.stylePropertyName.px] 사전 설정 단위를 사용하여 스타일 속성에 바인딩
  • [attr.attrName] 속성에 값을 바인딩합니다 (DOM에 표시되지만 속성은 표시되지 않음)
  • [role.roleName] ARIA 역할 속성에 바인딩합니다 (아직 사용할 수 없음)

• prop="{{value}}"값을 속성에 바인딩합니다. 값이 문자열 화됩니다 (일명 보간).

• (event)="expr"이벤트 핸들러를 @Output()또는 DOM 이벤트에 바인딩

• #var또는 #var상황에 따라 다른 기능이 있습니다

  • 에서 *ngFor="#x in y;#i=index"대한 범위 변수 반복 생성된다
    (* = ngFor로 변경이 beta.17에서 "Y에서 X하게, 인덱스 i를하자 =" ')
  • DOM 요소 <div #mydiv>에서 요소에 대한 참조
  • 각도 구성 요소에서 구성 요소에 대한 참조
  • Angular 구성 요소이거나 exportAs:"ngForm"정의 된 Angular 지시문 #myVar="ngForm"이있는 요소에서이 구성 요소 또는 지시문에 대한 참조를 작성합니다.

---

[]-속성 바인딩 데이터 소스에서 대상을 볼 때 단방향입니다. 예 :

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

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

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

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

우리는 () 대신에 사용할 수 있습니다.

[()]- 상자에 양방향 바인딩 바나나

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

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

---

이미 언급했듯이 Angular 문서, 특히 "영웅 튜토리얼"이 이에 대해 자세히 설명합니다. 당신이 그것을 확인하려면 여기 링크가 있습니다 .

괄호는 예제와 같은 버튼 클릭과 같이 작업중인 요소의 이벤트입니다. 이는 마우스 다운, 키업, onselect 또는 해당 요소에 대한 조치 / 이벤트 일 수 있으며 뒤에 나오는 =것은 호출 할 괄호를 사용하여 호출 할 메소드의 이름입니다. 이 메소드는 컴포넌트 클래스에 정의되어야합니다.

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

브래킷은 다른 방식으로 작동합니다. 이벤트를 보내는 괄호의 반대 인 클래스에서 데이터를 가져와야하므로 일반적인 예는 다음과 같은 스타일의 사용입니다.

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

보다? 모델 / 클래스에 따라 요소에 스타일을 부여하고 있습니다.

이를 위해 당신은 사용할 수 있습니다 ...

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

권장 사항은 다음과 같이 화면에 인쇄 할 항목에 이중 중괄호를 사용하는 것입니다.

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

어떤 것을 사용하든 일관성이 있으면 코드의 가독성에 도움이됩니다.

Lastly, for your * question, it is a longer explanation, but it is very VERY important: It abstracts some methods' implementation that otherwise you would have to do to get an ngFor to work.

One important update is that in the ngFor you will no longer use hash; you need to use let instead as follows:

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

One last thing worth mentioning is that all of the above applies also for your components, e.g. if you create a method in your component, it will be called using ():

<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