1. Описание
Шаблон Angular2 используется для отображения внешнего вида компонентов. Его использование в основном такое же, как и HTML -синтаксис. Самый простой шаблон Angular2 - это кусок HTML -кода. Синтаксис углового шаблона в основном включает в себя следующие части:
L Прямое связывание
L Интерполяционная экспрессия
L привязка атрибута
l Связывание событий
L Двусторонняя переплета
L Стиль Переплет
L шаблоны и *
L Локальные переменные
Во -первых, давайте посмотрим на пример шаблона, как показано ниже:
import {component, oninit} из '@angular/core';@component ({selecter: 'ui-demo', template: `<form rol =" form "> <div> <Legend> title </Legend> </div> <pan> Внимание: {{msg}} </span> <div> <div> </div> </div> </dive </div> </div> </div> </dive </div> </div> </dive </div> </div> </dive </div> </div> </dive </div> </dive </div> </dive </div> </div> [attr.size] = "size" [Placeholder] = "name"> </div> <div> <div> возраст </div> <input type = "text" (изменение) = "изменение ()" id = "age" name = "Age" [Placeholder] = "Age"> </div> <div> <div> sele </div> <input type = "text" [ngmodel) "=" = "=" = "=" = "=" = "=" = "=" = "=" = "=" = "=" = "=" = "=" = "=" = "=" = "=" = "=" = "=" = "=" ". [Placeholder] = "sex"> </div> <div *ng-if = "edpwd"> <div> pwd </div> <input #inpwd type = "пароль" [(ngmodel)] = "pwd" id = "pwd" name = "pwd"> type = "Кнопка" (click) = "show (inpwd.value)"> warn </button> </div> <div> <div [style.color] = "color"> <button Type = "отправить" [class.btn-primary] = "isprimary"> отправить </button> </div> </div> </form> `}). «Меры предосторожности»; имя: string = "name"; size: number = 4; возраст: number = 15; sex: string = 'male'; inepwd: boolean = true; pwd: string = ''; color: string = "red"; isprimary: boolean = true; construct () {} ngoninit ()} изменение (). {console.log ($ event);}}1.1 Прямая привязка
Например, свяжите строку непосредственно с соответствующим атрибутом, свяжите форму строки с атрибутом заголовка
<Легенда> Название </Легенда>
1.2 Экспрессия интерполяции
Выражение интерполяции выражается в форме {{}}, а значения соответствующего выражения в компоненте связаны с шаблоном для отображения. Например, значения выражения MSG отображаются в компоненте следующим образом.
<pan> Внимание: {{msg}} </span>1.3 Привязка атрибута
Связывание атрибута экспрессируется в форме [], связывая значение выражения с соответствующим атрибутом, например, связывание значения выражения имени в компоненте с заполнителем свойства
<div> <div> имя </div> <input type = "text" id = "name" name = "name" [Placeholder] = "name"> </div>
Когда в элементе, связанном с атрибутом соответствующий атрибут, [xx] можно использовать для непосредственного привязки. Однако, когда нет соответствующего атрибута на элементе, [attr.xxx] должен использоваться для добавления точки для привязки соответствующей информации атрибута.
<div> <div> Имя </div> <input type = "text" id = "name" name = "name" [attr.size] = "size" [Placeholder] = "name"> </div>
1.4 Стиль Переплет
Стиль в основном включает в себя два удобного, встроенного стиля стиля и привязки класса внешнего стиля.
1.4.1 Стиль Переплет
Стильное связывание синтаксически аналогично связующему свойствам. Тем не менее, часть в квадратных скобках не является названием атрибута элемента, но включает в себя префикс стиля, за которым следует точка (.), А затем имя атрибута стиля CSS. Указывает, что свойство используется на указанном элементе, как показано в: [style.style-perporty]. Например
<div> <div [style.color] = "color"> <button type = "Отправить" [class.btn-primary] = "iSprimary"> отправить </button> </div> </div>
1.4.2 Класс Переплет
Связывание класса CSS синтаксически аналогично связыванию свойств. Однако часть в квадратных скобках не является именем атрибута элемента, но включает в себя префикс класса, за которым следует точка (.), А затем состоит из имени класса CSS, как показано в: [class.class-name]. Указывает, использовать ли класс CSS на этом элементе или удалить класс CSS. Если следующее значение верно, таблица будет использоваться. Ложные средства для его удаления.
<div> <div [style.color] = "color"> <button type = "Отправить" [class.btn-primary] = "iSprimary"> отправить </button> </div> </div>
1.5 * с <шаблоном>
Во -первых, давайте посмотрим на пример * и <шаблон>.
<div *ng-if = "neadpwd"> <div> pwd </div> <input type = "password" [(ngmodel)] = "pwd" id = "pwd" name = "pwd"> </div>
* - это синтаксический сахар, который облегчает чтение и написание инструкций, которые требуют шаблонов для изменения макетов HTML. NGFOR, NGIF и NGSWITCH добавляют или удаляют подделки элементов, которые обернуты в тег <шаблон>. Используйте синтаксис * префикса, чтобы игнорировать тег <шаблон>, восстановленный код выглядит следующим образом
<Template [ngif] = "inepwwd"> <div> <div> pwd </div> <input type = "пароль" [(ngmodel)]] = "pwd" id = "pwd" name = "pwd"> </div> </template>
1.6 Локальные переменные
Локальные переменные представлены в виде #xxx. Если вы используете это выражение на элементе, XXX может использоваться для представления элемента. Локальные переменные могут использоваться в одном и том же элементе, элементе братьев и сестрах или любого дочернего элемента. Как показано ниже, вы можете использовать эту переменную для представления элемента в узле братьев и сестер
<div *ng-if = "neadpwd"> <div> pwd </div> <input #inpwd type = "password" [(ngmodel)]] = "pwd" id = "pwd" name = "pwd"> <button type = "(Click) =" Show (inpwwd.value) "> warn </attule> </div>
1.7 Привязка событий
Привязка атрибута выражается в форме () и связывает метод компонента с соответствующим событием. Например, связывает функцию изменения с событием изменения, и функция изменения будет запускаться при возникновении события изменения.
<div> <div> возраст </div> <input type = "text" (изменение) = "изменение ()" id = "age" name = "age" [Placeholder] = "Age"> </div>
1,8 Двусторонняя переплета
Двунаправленное связывание использует метод [()], чтобы представить, что двустороннее связывание представляет собой комбинацию связывания атрибутов и связывания событий. Наиболее часто используемым двусторонним связыванием является использование [(ngmodel)] = ”xxx” в форме. При изменении данных в форме связанные элементы данных будут изменены. Как показано ниже: когда форма вводится для изменения, половая переменная также будет модифицирована синхронно
<div> <div> sex </div> <input type = "text" [(ngmodel)]] = "sex" id = "sex" name = "sex" [заполнитель] = "sex"> </div>
Выше приведено соответствующее знание грамматики шаблона Angular2, представленной вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение. Редактор ответит вам вовремя. Большое спасибо за вашу поддержку на веб -сайте Wulin Network!