<input type="text" [value]="value" #name>
1. A variável de referência do template pode ser um elemento DOM, componente Angular (instrução), elemento, TemplateRef ou até mesmo uma referência a um componente Web no Angualr template , e é específico O que é depende do elemento ao qual está anexado (sem intervenção por meio de diretivas) . Como no exemplo de código anterior, o name da variável de referência do modelo é uma referência ao elemento DOM <input> . [Recomendação de tutorial relacionado: "tutorial angular"]
<app-component #component [input]="variable"></app-component>
{{ componente.input }}
{{ component.func() }} Por meio da variável de referência do modelo, obtemos a referência da instância app-component , o que nos permite acessar facilmente os membros dentro app-component no modelo.
2. Angular atribui valores às variáveis do modelo com base na localização da variável que você declara:
se você declarar uma variável em um componente, a variável se referirá à instância do componente.
Se você declarar uma variável em uma marcação HTML padrão, a variável se referirá a esse elemento.
Se você declarar uma variável no elemento <ng-template> , a variável fará referência a uma instância TemplateRef para representar o modelo.
Se a variável especificar um nome à direita, como #var="ngModel" , a variável se referirá à diretiva ou componente com o nome exportAs no elemento.
3. Usando NgForm com variáveis de modelo <br/> A diretiva NgForm aqui demonstra como referenciar valores diferentes referenciando o nome exportAs da diretiva. No exemplo a seguir, a variável de modelo itemForm aparece três vezes no HTML.
<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
<label for="name">Nome</label>
<input type="text" id="name" class="form-control" name="name" ngModel obrigatório />
<button type="submit">Enviar</button>
</form>
<div [oculto]="!itemForm.form.valid">
<p>{{ submitMessage }}</p>
</div> * Se não houver valor do atributo ngForm, o valor referenciado por itemForm será o elemento <form> . Com 和Directive之间的差异在于Angular 在没有指定属性值的情况下，Angular 会引用Component ，而Directive不会改变这种隐式引用（即它的宿主元素)。(还没读懂什么意思.......
e depois de usar NgForm , itemForm é uma referência à diretiva NgForm. Você pode usá-la para rastrear o valor e a validade de cada controle no formulário.
Comparado com o nativo <form> Diferentes elementos, a diretiva NgForm possui um atributo form . Se itemForm.form.valid for inválido, o atributo form de NgForm permitirá que você desative o botão de envio.
Na verdade, ao usar angular para escrever páginas de lista, as variáveis de referência do modelo são frequentemente. usado:
Faça referência ao método executeQuery() de ngxQuery na caixa de entrada do componente de lista. Claro, se quisermos usar variáveis de referência de modelo em ts, devemos usar @ViewChild e @ViewChildren, que são os decoradores fornecidos pelo Angular.
Obtemos o componente ngxQuery através do nome da variável de modelo em ts:
Em ts, você pode chamar diretamente o método ExecuteQuery() de ngxQuery e atualizar a lista quando os parâmetros são passados:
(Conteúdo relevante sobre o decorador ViewChild pode ser encontrado aqui******)
Para componentes pai-filho, variáveis de referência de modelo também podem ser usadas diretamente:
buGroup é um array em bugroupSelectComponent, que é passado como uma variável de referência de modelo através do componente pai-filho vem:
Obtenha o valor do componente filho no componente pai ts e use:
