1. Descrição
O modelo Angular2 é usado para exibir a aparência dos componentes. Seu uso é basicamente o mesmo que a sintaxe HTML. O modelo Angular2 mais simples é uma peça do código HTML. A sintaxe do modelo angular inclui principalmente as seguintes peças:
l Ligação direta
l Expressão de interpolação
l Atributo Ligação
l Ligação de eventos
l Bidirecionamento de duas vias
l Ligação do estilo
L Modelos e *
l Variáveis locais
Primeiro, vamos dar uma olhada em um exemplo de modelo, como mostrado abaixo:
importar {componente, oninit} de '@angular/core';@componente ({seletor: 'ui-demo', modelo: `<form role =" formulário "> <div> <legend> title </legend> </div> <span> atenção: {{msg}} </span> <div> name </" [attr.size]="size" [placeholder]="name"></div><div><div>age</div><input type="text" (change)="change()" id="age" name="age" [placeholder]="age"></div><div><div>sex</div><input type="text" [(ngModel)]="sex" id="sex" name="sex" [espaço reservado] = "sexo"> </div> <div *ng-if = "neitpwd"> <div> pwd </div> <input #inpwd type = "senha" [(ngmodel)] = "pwd" id = "pwd" name = "pwd"> <button typen = "" "" "" (clique) = "Mostrar (inpwd.value)"> warn </button> </div> <div> <div [style.color] = "color"> <button type = "submit" [class.btn-primary] = "isPrimary"> submit </button> </div> </div> </formulamentos>}) "Precautions";name: string = "name";size: number = 4;age: number = 15;sex: string = 'male';needpwd: boolean = true;pwd: string = '';color: string = "red";isPrimary: boolean = true;constructor() { }ngOnInit() { }change() {}show($event) {Console.log ($ Event);}}1.1 Ligação direta
Ligue a string diretamente ao atributo correspondente, por exemplo, vincule o formulário da string ao atributo de título
<legend> título </legend>
1.2 Expressão de interpolação
A expressão de interpolação é expressa na forma de {{}}, e os valores da expressão correspondente no componente estão ligados ao modelo para exibição. Por exemplo, os valores da expressão de MSG são exibidos no componente da seguinte forma.
<man> ATTRIAL: {{msg}} </span>1.3 Ligação de atributo
A ligação do atributo é expressa na forma de [], vinculando o valor da expressão ao atributo correspondente, por exemplo, vinculando o valor da expressão do nome no componente ao espaço reservado pela propriedade
<div> <div> nome </div> <input type = "text" id = "name" name = "name" [espaço reservado] = "name"> </div>
Quando existe um atributo correspondente no elemento ligado ao atributo, [xx] pode ser usado para se ligar diretamente. No entanto, quando não há um atributo correspondente no elemento, [att.xxx] deve ser usado para adicionar um ponto para vincular as informações de atributo correspondentes.
<div> <div> nome </div> <input type = "text" id = "name" name = "name" [att.size] = "size" [espaço reservado] = "name"> </div>
1.4 Ligação de estilo
A ligação ao estilo inclui principalmente dois estilos convenientes e em linha e encadernação de classe de estilo externo.
1.4.1 Ligação de estilo
A ligação ao estilo é sintaticamente semelhante à ligação de propriedades. No entanto, a parte dos colchetes não é o nome do atributo de um elemento, mas inclui um prefixo de estilo seguido por um ponto (.) E, em seguida, o nome do atributo do estilo CSS. Indica que a propriedade é usada no elemento especificado, conforme mostrado em: [style.style-porporty]. Por exemplo
<div> <div [style.color] = "color"> <button type = "submit" [class.btn-Primary] = "isPrimary"> submeter </butut> </div> </div>
1.4.2 Classe Ligação
A ligação da classe CSS é sintaticamente semelhante à ligação de propriedades. No entanto, a parte dos colchetes não é o nome do atributo de um elemento, mas inclui um prefixo de classe seguido por um ponto (.) E, em seguida, composto pelo nome da classe CSS, como mostrado em: [class.class-name]. Indica se deve usar a classe CSS neste elemento ou remover a classe CSS. Se o seguinte valor for verdadeiro, a tabela será usada. Falso significa removê -lo.
<div> <div [style.color] = "color"> <button type = "submit" [class.btn-Primary] = "isPrimary"> submeter </butut> </div> </div>
1.5 * com <Sodemplate>
Primeiro, vamos dar uma olhada em um exemplo de * e <Sodemplate>.
<div *ng-if = "neitpwd"> <div> pwd </div> <input type = "senha" [(ngmodel)] = "pwd" id = "pwd" name = "pwd"> </div>
* é um açúcar de sintaxe que facilita a leitura e a gravação de instruções que exigem modelos para modificar os layouts HTML. NGFOR, NGIF e NGSWitch Adicionam ou removem subárvores de elementos que são embrulhados na tag <Sodemplate>. Use a sintaxe do * prefixo para ignorar a tag <Sodemplate>, o código restaurado é o seguinte
<modelo [ngif] = "neotpwd"> <div> <div> pwd </div> <input type = "senha" [(ngmodel)] = "pwd" id = "pwd" name = "pwd"> </div> </matplate>
1.6 Variáveis locais
As variáveis locais são representadas na forma de #xxx. Se você usar essa expressão em um elemento, xxx poderá ser usado para representar o elemento. As variáveis locais podem ser usadas no mesmo elemento, elemento de irmãos ou qualquer elemento filho. Como mostrado abaixo, você pode usar esta variável para representar o elemento em um nó de irmão
<div *ng-if = "neitpwd"> <div> pwd </div> <input #inpwd type = "senha" [(ngmodel)] = "pwd" id = "pwd" name = "pwd"> <butter type = "button () (clique) Mostrar (inpwd.value)">
1.7 Ligação de eventos
A ligação do atributo é expressa na forma de () e liga o método do componente ao evento correspondente. Por exemplo, liga a função de mudança ao evento de mudança e a função de mudança será acionada quando o evento de alteração ocorrer.
<div> <div> Age </div> <input type = "text" (alteração) = "alteração ()" id = "idade" name = "idade" [espaço reservado] = "idade"> </div>
1,8 ligação bidirecional
A ligação bidirecional usa o método [()] para representar que a ligação bidirecional é uma combinação de ligação de atributos e ligação de eventos. A ligação bidirecional mais usada é usar [(ngmodel)] = "xxx" no formulário. Ao modificar os dados no formulário, os itens de dados vinculados serão modificados. Como mostrado abaixo: Quando o formulário é inserido para modificar, a variável de sexo também será modificada de maneira síncrona
<div> <div> sexo </div> <input type = "text" [(ngmodel)] = "sexo" id = "sexo" nome = "sexo" [espaço reservado] = "sexo"> </div>
O exposto acima é o conhecimento relevante da gramática do modelo Angular2 apresentada a você pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem. O editor responderá a tempo. Muito obrigado pelo seu apoio ao site da Wulin Network!