O que é vinculação de dados unidirecional no Angular
A vinculação de dados unidirecional no Angular (ou seja, vinculação unidirecional) é uma maneira de vincular dados do componente à exibição (DOM) ou vice-versa - da exibição ao componente. Ele é usado para exibir informações para o usuário final, que permanecem sincronizadas automaticamente com cada alteração dos dados subjacentes. Isso é semelhante à associação unidirecional no WPF.
What is Angular data binding?
A vinculação de dados é amplamente usada por programadores, pois esse tipo de serviço agiliza significativamente o processo de atualização de qualquer interface do usuário e também reduz a quantidade de clichês ao criar um aplicativo. A vinculação de dados no Angular é super fácil e, ao contrário do WPF, não precisamos nos preocupar com um contexto de dados, um modelo de exibição ou INotifyPropertyChanged (INPC). Tudo o que temos que nos preocupar é com um arquivo HTML e um arquivo datilografado. Com qualquer associação de dados, a primeira coisa que você precisa são propriedades para associar. Então, vamos adicionar uma propriedade chamada text na classe component e definir seu valor. No WPF, precisamos definir o DataContext e associar a propriedade em XAML:
public class IgniteUIClass
{
public string Text { get; set; }
public IgniteUIClass()
{
this.Text = "IgniteUI for Angular";
}
}
...
public MainWindow()
{
InitializeComponent();
this.DataContext = new IgniteUIClass();
}
<Label Content="{Binding Path=Text, Mode=OneWay}"></Label>
Em Angular, estamos vinculando diretamente uma propriedade DOM à propriedade de um componente:
export class SampleComponent implements OnInit {
text = 'IgniteUI for Angular';
constructor() { }
ngOnInit() {}
}
<h2>{{ text }}</h2>
Angular Data Binding Interpolation
No código acima, simplesmente exibimos algum texto no HTML usando uma associação ao valor da text propriedade. Nesse caso, estamos usando interpolation para criar uma ligação unidirecional. Fazemos isso digitando chaves duplas, o nome da propriedade - no nosso caso text, e duas chaves de fechamento. Outra maneira de obter o mesmo resultado é criar a tag h2 e vincular a text propriedade à sua propriedade innerHTML, usando a interpolation sintaxe novamente:
<h2 innerHTML="{{ text }}"></h2>
Há duas coisas importantes sobre interpolation.
- Primeiro, tudo dentro das chaves é renderizado como um
string. - Em segundo lugar, tudo dentro das chaves é chamado de um
template expression. Isso nos permite fazer coisas mais complexas, como a concatenação.
Por exemplo, vamos concatenar algum texto com o valor da text propriedade:
<h2>{{"Welcome to " + text }}</h2>
O uso de expressões de modelo nos permite vincular a propriedades e métodos javascript também. Por exemplo, podemos vincular ao comprimento da propriedade, o text que resultará no número 20:
<h2>{{ text.length }}</h2>
Também podemos vincular a métodos dessa propriedade, por exemplo, para toUpperCase():
<h2>{{ text.toUpperCase() }}</h2>
Isso é muito mais poderoso do que a vinculação de dados no WPF e muito mais fácil de usar também. Podemos até fazer cálculos matemáticos dentro da expressão do modelo. Por exemplo, podemos simplesmente colocar 2 + 2 na expressão e ela exibirá o resultado, que é igual a 4:
<h2>{{ 2 + 2 }}</h2>
Mais uma coisa que podemos fazer é vincular aos métodos reais do arquivo datilografado. Aqui está um pequeno exemplo de como conseguir isso:
<h2>{{ getTitle() }}</h2>
Este getTitle() é um método definido no arquivo datilografado. O resultado na página é o valor retornado desse método:
getTitle() {
return 'Simple Title';
}
Embora pareça interpolation bastante poderoso, ele tem suas limitações, por exemplo - representa apenas uma string. Então, vamos criar uma propriedade booleana simples na classe component:
export class SampleComponent implements OnInit {
text = 'IgniteUI for Angular';
isDisabled = false;
constructor() { }
...
Agora vamos criar um texto simples input do tipo e vincular a isDisabled propriedade à propriedade da disabled entrada:
<input type="text" disabled="{{ isDisabled }}">
O resultado esperado é que o input deve ser habilitado, mas está desabilitado. Isso ocorre porque o interpolation retorna uma string, mas a propriedade disabled da entrada é do tipo booleano e requer um valor booleano. Para que isso funcione corretamente, Angular fornece property binding.
Angular Property Binding
A vinculação de propriedade no Angular é usada para vincular valores para propriedades de destino de elementos ou diretivas HTML. A sintaxe aqui é um pouco diferente da interpolação. Com a associação de propriedade, o nome da propriedade é colocado entre colchetes e seu valor não contém chaves - apenas o nome da propriedade à qual ele está associado.
<input type="text" [disabled]="isDisabled">
Usando a associação de propriedade, a propriedade da disabled entrada é associada a um resultado booliano, não a uma cadeia de caracteres. O isDisabled valor é false e a execução do aplicativo exibiria a entrada como habilitada.
Note
É muito importante lembrar que, quando uma associação depende do resultado do tipo de dados, um property binding deve ser usado! Se a associação simplesmente depender de um valor de cadeia de caracteres, então interpolation deve ser usado.
Additional Resources
- Desktop para Web: vinculação de dados unidirecional com interpolação Angular e vinculação de propriedade
- Encadernação bidirecional em Angular
- Angular Exibindo dados
GitHub