Angular 템플릿 구문에 대한 설명

이 글은 주로 참조값이 있는 Angular 템플릿 구문에 대한 설명을 소개합니다. 이제 모든 사람과 공유합니다. 필요한 친구들이 참조할 수 있습니다.

템플릿 구문 소개

1.Angular 쌍 모두 이중 중괄호 안의

표현식

이 평가되고, 평가 결과가 문자열로 변환되며, 인접한 문자열 리터럴과 연결됩니다. 마지막으로 결합된 보간 결과를 요소나 지시어의 속성에 할당합니다. 표면적으로는 요소 태그 사이에 결과를 삽입하고 태그의 속성을 할당했습니다. 이렇게 생각하면 편리하고, 이러한 오해로 인해 문제가 발생하는 경우는 거의 없습니다. 그러나 엄밀히 말하면 이는 사실이 아니다. 보간 표현식은 Angular가 속성 바인딩으로 변환하는 특수 구문입니다.

은

<p>Hello {{name}}</p>

2와 동일합니다. 템플릿 표현식

템플릿 표현식은 값을 생성합니다. Angular는 이 표현식을 실행하고 HTML 요소, 구성 요소 또는 지시문일 수 있는 바인딩 대상의 속성에 할당합니다.

입력 속성의 값은 상수입니다.

<p [textContent]="interpolate([&#39;Hello&#39;], [name])"></p>

는

<show-title title="Some Title"></show-title>

와 동일합니다. 입력 속성의 값은 변수입니다.

<show-title [title]="&#39;Some Title&#39;"></show-title>

대괄호를 잊지 마세요. 대괄호는 Angular가 템플릿 표현식을 평가하도록 지시합니다. . 대괄호 추가를 잊어버린 경우 Angular는 표현식을 문자열 상수로 처리하고 문자열을 사용하여 대상 속성을 초기화합니다.

템플릿 변수

her 앞의 let 키워드는 Hero라는 이름의

템플릿 입력 변수

를 생성합니다. ngFor 지시문은 상위 구성 요소의 영웅 속성에 의해 반환된 영웅 배열을 반복하여 각 반복마다 배열의 현재 요소를 영웅 변수에 할당합니다.

<show-title [title]="someTitle"></show-title>

템플릿 참조 변수

템플릿 참조 변수는 일반적으로 템플릿의 DOM 요소를 참조하는 데 사용됩니다. 또한 Angular 구성 요소나 지시어 또는 웹 구성 요소를 참조할 수도 있습니다. 참조 변수를 선언하려면 파운드 기호(#)를 사용하십시오. #phone은 요소를 참조하기 위해 Phone이라는 변수를 선언하는 것을 의미합니다.

<p *ngFor="let hero of heroes">{{hero.name}}</p>

템플릿 문

템플릿 문은 바인딩 대상(예: HTML 요소, 구성 요소 또는 지시문)에 의해 트리거되는 이벤트에 응답하는 데 사용됩니다.

<input #phone placeholder="phone number">

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

Angular-UI 부트스트랩 구성 요소를 사용하여 경고를 구현하는 방법

config/index.js에 대한 자세한 설명: vue의 구성

위 내용은 Angular 템플릿 구문에 대한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!