Angular 2 왜 별표 (*)

Question 1

각도 2 문서, * 및 템플릿 에서 * ngIf, * ngSwitch, * ngFor는 ng-template 태그로 확장 될 수 있음을 알고 있습니다. 내 질문은 :

나는 생각 ngIf하거나 ngFor하지 않고 *또한 번역과 각 엔진에 의해 템플릿 태그 확장 할 수 있습니다.

다음 코드

<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>

다음과 같을 것입니다

<ng-template [ngIf]="currentHero">
  <hero-detail [hero]="currentHero"></hero-detail>
</ng-template>

그렇다면 왜 *각도 2에서 이상한 기호 별표 ( )를 디자인해야 할까요?

Question 2

별표 구문은 지시문이 내부적으로 확장되는보다 장황한 템플릿 구문에 대한 구문 적 설탕입니다. 이러한 옵션을 자유롭게 사용할 수 있습니다.

문서 에서 인용 :

별표는 "구문 설탕"입니다. 작가와 독자 모두를 위해 ngIf 및 ngFor를 단순화합니다. 내부적으로 Angular는 별표 버전을보다 자세한 형식으로 대체합니다.

다음 두 ngIf 예제는 사실상 동일하며 두 스타일 중 하나로 작성할 수 있습니다.



<p *ngIf="condition">
  Our heroes are true!
</p>


<template [ngIf]="condition">
  <p>
    Our heroes are true!
  </p>
</template>

Question 3

Angular2는 특별한 종류의 지시문을 제공합니다- 구조 지시문

구조적 지시문은 <template>태그를 기반으로합니다 .

*속성 전에 선택기 구조 지정이 아닌 통상의 속성 또는 속성 지정 결합 적용되어야 함을 나타낸다. Angular2는 내부적으로 구문을 명시적인 <template>태그 로 확장합니다 .

final 이후 태그 <ng-container>와 유사하게 사용할 수 <template>있지만 더 일반적인 속기 구문을 지원하는 요소도 있습니다 . 예를 들어 지원되지 않는 단일 요소에 두 개의 구조적 지시문을 적용해야 할 때 필요합니다.

<ng-container *ngIf="boolValue">
  <div *ngFor="let x of y"></div>
</ng-container>

Question 4

Angular는 템플릿 요소를 특별한 방식으로 처리합니다. *구문은 전체 쓰기 무효화 할 수있는 바로 가기입니다 <template>요소. 어떻게 작동하는지 보여 드리겠습니다.

이것을 사용하여

*ngFor="let t of todos; let i=index"

설탕을 빼다

template="ngFor: let t of todos; let i=index"

설탕을 제거하는

<template ngFor [ngForOf]="todos" .... ></template>

또한 ngFor, ngIf 등과 같은 angular의 구조 지시문 *은이 사용자 지정 지시문 및 구성 요소와 구별하기 위해 접두사가 붙습니다.

여기에서 더보기

https://vsavkin.com/angular-2-template-syntax-5f2ee9f13c6a#.rcffirs7a

Question 5

에서 각도 문서 :

구조적 지시문은 HTML 레이아웃을 담당합니다. 일반적으로 요소를 추가, 제거 또는 조작하여 DOM의 구조를 형성하거나 재구성합니다.

다른 지시문과 마찬가지로 구조 지시문을 호스트 요소에 적용합니다 . 그런 다음 지시문은 해당 호스트 요소 및 해당 하위 요소와 관련하여 수행해야하는 작업을 수행합니다.

구조적 지시문은 쉽게 인식 할 수 있습니다. 이 예에서와 같이 별표 (*)가 지시문 속성 이름 앞에옵니다.

<p *ngIf="userInput">{{username}}</p>

Question 6

때때로 당신은해야 할 수도 있습니다 <a *ngIf="cond">그것은 단지 하나 개의 태그 때, 예를 들면. 때로는 실제 태그를 태그로 연결하는 래퍼로 사용하지 않고 여러 태그 주위에 ngIf를 배치 할 수 있습니다 <template [ngIf]="cond">. angular는 최종 결과 html에서 ngIf 지시어 소유자를 렌더링해야하는지 여부를 어떻게 알 수 있습니까? 그래서 그것은 단지 코드를 더 명확하게 만드는 것 이상의 것입니다. 필요한 차이입니다.