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

151

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에서 특별한 의미를 가지고 있으며 각 기호 를 사용할 때를 가장 쉽게 알 수있는 방법은 무엇 입니까? 감사!!

angular

— 데이비드 메자
소스

답변:

153

모든 세부 사항은 여기에서 찾을 수 있습니다 : 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"이있는 요소에서이 구성 요소 또는 지시문에 대한 참조를 작성합니다.

— 귄터 bau 바우어
소스

또는 bind-for []또는 on-for ()또는 <template [ngFor]>for *ngFor.

— Günter Zöchbauer

[(ngModel)]은 대괄호 안의 괄호를 의미합니까?

— Usman

양방향은 (또한 box6에 "바나나라고도 함) 바인딩. 그것은의 (또는 짧은 형식의) 조합의 [ngModel]="foo" (ngModelChange)="foo = $event"첫 번째 부분은 업데이트 곳 ngModel(재산 @Input() ngModel;의 NgModel지시 ) when foo` 변경 및 제 2 부분 업데이트 (의 ) 지침 이벤트를 발생시킵니다. 값을 바인딩하여 요소와 구성 요소를 형성 하는 데 사용됩니다 . 자신의 구성 요소와도 조합 하여 사용할 수 있습니다foo@Output() ngModelChange;NgModelNgModel[(bar)]@Input() bar; @Output() barChange;

— Günter Zöchbauer

GünterZöchbauer @의 차이 무엇입니까 [prop]="value"및 prop="{{value}}"구문보다는 무엇을? 둘 다 @Input() value;컴포넌트에서 값을 전달할 수 있습니다 .

— DiPix

@DiPix [prop]="value"는 모든 유형의 값을 할당 할 수 있으며 할당 전에 prop="{{value}}"항상 문자열 을 지정 value하므로 객체를 전달하는 데 쓸모가 없습니다.

— Günter Zöchbauer

[]- 데이터 소스에서 대상을보기 위해 단방향 속성 바인딩 . 예 :

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

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

마지막으로, 귀하의 *질문에 대해서는 더 긴 설명이지만 매우 중요합니다. 일부 방법 ngFor을 사용하려면 작업 을 수행 해야하는 메소드 구현을 추상화 합니다.

한 가지 중요한 업데이트가 된다는 점에서 ngFor더 이상 사용 해시 것이다; let대신 다음과 같이 사용해야 합니다.

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

마지막으로 언급 할 가치가있는 것은 위의 모든 내용이 구성 요소에도 적용된다는 것입니다. 예를 들어 구성 요소에 메서드를 만드는 경우 다음을 사용하여 호출됩니다 ().

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

— 게리
소스