Angular에서 단방향 데이터 바인딩이란 무엇입니까?
Angular의 단방향 데이터 바인딩(즉, 단방향 바인딩)은 컴포넌트에서 뷰(DOM)로 데이터를 바인딩하거나 그 반대로 뷰에서 컴포넌트로 데이터를 바인딩하는 방법입니다. 이는 기본 데이터가 변경될 때마다 자동으로 동기화되는 정보를 최종 사용자에게 표시하는 데 사용됩니다. 이는 WPF의 단방향 바인딩과 유사합니다.
What is Angular data binding?
Data binding is widely used by programmers as this type of services significantly streamlines the process of updating any UI and also reduces the amount of boilerplate when building an app. Data binding in Angular is super easy, and unlike in WPF we don't have to worry about a data context, a view model, or INotifyPropertyChanged (INPC). All we have to worry about is an HTML file and a typescript file. With any data binding, the first thing you need are properties to bind to. So let's add a property called text into the component class, and set its value.
In WPF, we need to set the DataContext and bind the property in 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>
Angular 에서는 DOM 속성을 구성 요소의 속성에 직접 바인딩합니다.
export class SampleComponent implements OnInit {
text = 'IgniteUI for Angular';
constructor() { }
ngOnInit() {}
}
<h2>{{ text }}</h2>
Angular Data Binding Interpolation
In the code from above, we simply display some text in the HTML by using a binding to the value of the text property. In this case, we are using interpolation to create a one-way binding. We do this by typing double curly braces, the name of the property - in our case text, and two closing curly braces. Another way to achieve the same result is to create h2 tag and bind the text property to its innerHTML property, by using the interpolation syntax again:
<h2 innerHTML="{{ text }}"></h2>
There are two important things about interpolation.
- First, everything inside the curly braces is rendered as a
string. - Second, everything inside the curly braces is referred to as a
template expression. This allows us to do more complex things, such as concatenation.
For example, let's concatenate some text with the value of the text property:
<h2>{{"Welcome to " + text }}</h2>
The use of template expressions allows us to bind to javascript properties and methods as well. For example, we can bind to the text property's length which will result in the number 20:
<h2>{{ text.length }}</h2>
We can also bind to methods of that property, for example to toUpperCase():
<h2>{{ text.toUpperCase() }}</h2>
이는 WPF의 데이터 바인딩보다 훨씬 강력하고 사용하기도 훨씬 쉽습니다. 템플릿 표현식 내에서 수학적 계산을 수행할 수도 있습니다. 예를 들어, 간단히 2 + 2를 표현식에 넣으면 4와 같은 결과가 표시됩니다.
<h2>{{ 2 + 2 }}</h2>
우리가 할 수 있는 또 하나의 일은 typescript 파일에서 실제 메소드에 바인딩하는 것입니다. 이를 달성하는 방법에 대한 간단한 예는 다음과 같습니다.
<h2>{{ getTitle() }}</h2>
This getTitle() is a method defined in the typescript file. The result on the page is the returned value of that method:
getTitle() {
return 'Simple Title';
}
Although the interpolation looks quite powerful, it has its limitations, for example - it only represents a string.
So let's create a simple boolean property in the component class:
export class SampleComponent implements OnInit {
text = 'IgniteUI for Angular';
isDisabled = false;
constructor() { }
...
We will now create a simple input of type text and bind the isDisabled property to the input's disabled property:
<input type="text" disabled="{{ isDisabled }}">
The expected result is that the input should be enabled, but it's disabled. This is because the interpolation returns a string, but the input's disabled property is of boolean type and it requires a boolean value.
In order for this to work correctly, Angular provides property binding.
Angular Property Binding
Angular의 속성 바인딩은 HTML 요소 또는 지시문의 대상 속성 값을 바인딩하는 데 사용됩니다. 여기의 구문은 보간 구문과 약간 다릅니다. 속성 바인딩을 사용하면 속성 이름이 대괄호로 묶이고 해당 값에는 중괄호가 포함되지 않으며 바인딩된 속성의 이름만 포함됩니다.
<input type="text" [disabled]="isDisabled">
By using property binding, the input's disabled property is bound to a boolean result, not a string. The isDisabled value is false and running the app would display the input as enabled.
Note
It is very important to remember that when a binding relies on the data type result, then a property binding should be used! If the binding simply relies on a string value, then interpolation should be used.
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub