1. 설명
Angular2 템플릿은 구성 요소의 모양을 표시하는 데 사용됩니다. 사용량은 기본적으로 HTML 구문과 동일합니다. 가장 간단한 Angular2 템플릿은 HTML 코드의 조각입니다. 각도 템플릿 구문에는 주로 다음 부분이 포함됩니다.
l 직접 바인딩
L 보간 표현
l 속성 바인딩
l 이벤트 바인딩
l 양방향 바인딩
l 스타일 바인딩
l 템플릿 및 *
l 로컬 변수
먼저 다음과 같이 템플릿의 예를 살펴 보겠습니다.
'@angular/core'에서 {import {component, oninit}}@component ({selector : 'ui-demo', 템플릿 : <form role = "form"> <div> <geend> title </div> <div> <div> <div> </div> name <name "" "" "" ""id = ""name " [attr.size] = "size"[size "="name "> </div> <div> <div> age </div> <input type ="text "(Change) ="change () "id ="age "name ="age "[placeholder] ="age "> </div> <div> <div> 섹스 </div> <입력 유형 ="text " [placeholder] = "sex"> </div> <div *ng-if = "needpwd"> <div> pwd </div> <입력 #inpwd type = "password"[(ngmodel)] = "pwd"id = "pwd"name = "pwd"> <button type = "button" (Click) = "show (inpwd.value)"> Warn </button> </div> <div> <div [style.color] = "color"> <button type = "class.btn-primary] ="isprimary "> 제출 </div> </div> </form>`}) export class 템플릿 on one oninit : "예방 조치"; 이름 : string = "이름"; 크기 : 번호 = 4; age : num {console.log ($ event);}}1.1 직접 바인딩
예를 들어 문자열을 해당 속성에 직접 바인딩합니다. 예를 들어 문자열 양식을 제목 속성에 바인딩합니다.
<Legend> 제목 </LEGEND>
1.2 보간 표현
보간 표현은 {{}}의 형태로 표현되며, 구성 요소에서의 해당 표현 값은 디스플레이를 위해 템플릿에 바인드됩니다. 예를 들어, MSG 표현식의 값은 다음과 같이 구성 요소에 표시됩니다.
<Span>주의 : {{msg}} </span>1.3 속성 바인딩
속성 바인딩은 []의 형태로 표현되어 표현식 값을 해당 속성에 바인딩합니다.
<div> <div> name </div> <입력 유형 = "text"id = "name"name = "name"[자리 표시 자] = "이름"> </div>
속성에 바인딩 된 요소에 해당 속성이있는 경우 [xx]를 사용하여 직접 바인딩 할 수 있습니다. 그러나 요소에 해당 속성이 없으면 [attr.xxx]를 사용하여 해당 속성 정보를 바인딩하는 점을 추가해야합니다.
<div> <div> name </div> <입력 유형 = "text"id = "name"name = "name"[attr.size] = "size"[placeholder] = "name"> </div>
1.4 스타일 바인딩
스타일 바인딩에는 주로 두 가지 편리한 인라인 스타일 스타일과 외부 스타일 클래스 바인딩이 포함됩니다.
1.4.1 스타일 바인딩
스타일 바인딩은 구문 적으로 속성 바인딩과 유사합니다. 그러나 정사각형 브래킷의 부분은 요소의 속성 이름이 아니지만 스타일 접두사 다음과 DOT (.), CSS 스타일의 속성 이름이 포함됩니다. [style.style-perporty]와 같이 지정된 요소에 속성이 사용됨을 나타냅니다. 예를 들어
<div> <div [style.color] = "color"> <button type = "제출"[class.btn-primary] = "isprimary"> 제출 </button> </div> </div>
1.4.2 클래스 바인딩
CSS 클래스 결합은 성질 결합과 구문 적으로 유사합니다. 그러나 정사각형 브래킷의 부분은 요소의 속성 이름이 아니지만 클래스 접두사 뒤에 DOT (.)를 포함한 다음 [class.class-name]에 표시된대로 CSS 클래스의 이름으로 구성됩니다. 이 요소에서 CSS 클래스를 사용할 것인지 또는 CSS 클래스를 제거할지 여부를 나타냅니다. 다음 값이 참이면 테이블이 사용됩니다. 거짓을 제거하는 거짓 수단.
<div> <div [style.color] = "color"> <button type = "제출"[class.btn-primary] = "isprimary"> 제출 </button> </div> </div>
<템플릿>과 함께 1.5 *
먼저 * 및 <emplate>의 예를 살펴 보겠습니다.
<div *ng-if = "needpwd"> <div> pwd </div> <input type = "password"[(ngmodel)] = "pwd"id = "pwd"name = "pwd"> </div>
* HTML 레이아웃을 수정하기 위해 템플릿이 필요한 지침을보다 쉽게 읽고 쓸 수있는 구문 설탕입니다. ngfor, ngif 및 ngswitch는 모두 <template> 태그로 랩핑되는 요소 하위 트리를 추가하거나 제거합니다. * prefix 구문을 사용하여 <template> 태그를 무시하고 복원 된 코드는 다음과 같습니다.
<템플릿 [ngif] = "needpwd"> <div> <div> pwd </div> <input type = "password"[(ngmodel)] = "pwd"id = "pwd"name = "pwd"> </div> </template>
1.6 로컬 변수
로컬 변수는 #xxx 형태로 표시됩니다. 요소 에서이 표현식을 사용하는 경우 XXX를 사용하여 요소를 나타낼 수 있습니다. 로컬 변수는 동일한 요소, 형제 자매 요소 또는 자식 요소에서 사용할 수 있습니다. 아래와 같이이 변수를 사용하여 형제 노드의 요소를 나타낼 수 있습니다.
<div *ng-if = "needpwd"> <div> pwd </div> <입력 #inpwd type = "password"[(ngmodel)] = "pwd"id = "pwd"name = "pwd"> <버튼 유형 = "button"= "show (inpwd.value)"> warn> </button> </div>
1.7 이벤트 바인딩
속성 바인딩은 ()의 형태로 표현되며 구성 요소의 메소드를 해당 이벤트에 바인딩합니다. 예를 들어, 변경 함수를 변경 이벤트에 바인딩하면 변경 이벤트가 발생할 때 변경 기능이 트리거됩니다.
<div> <div> age </div> <입력 유형 = "text"(change) = "change ()"id = "age"name = "age"[placeholder] = "age"> </div>
1.8 양방향 바인딩
양방향 결합은 [()] 메소드를 사용하여 양방향 결합이 속성 바인딩 및 이벤트 결합의 조합이라는 것을 나타냅니다. 가장 일반적으로 사용되는 양방향 바인딩은 양식에서 [(ngmodel)] = "xxx"를 사용하는 것입니다. 양식으로 데이터를 수정하면 바인딩 데이터 항목이 수정됩니다. 아래와 같이 : 양식이 수정하기 위해 입력되면 성 변수도 동시에 수정됩니다.
<div> <div> sex </div> <입력 유형 = "text"[(ngmodel)] = "sex"id = "sex"name = "sex"[sepholder] = "sex"> </div>
위는 편집자가 소개 한 Angular2 템플릿 문법에 대한 관련 지식입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨주세요. 편집자는 제 시간에 답장을 드릴 것입니다. Wulin Network 웹 사이트를 지원해 주셔서 대단히 감사합니다!