پرش به محتوا

ارسال داده از کامپوننت به قالب در انگولار – Data Binding

در ادامه پست های انگولار، امروز میخوام به انتقال مقادیر از logic به view بپردازم. یعنی میخام یه داده رو از کامپوننت به قالب بفرستم. برای این کار از دو روش string interpolation و property binding میتونیم استفاده کنیم که جداگانه در ادامه به اونها خواهم پرداخت.

string interpolation در انگولار
string interpolation در انگولار

ارسال داده از class به template با استفاده از string interpolation در انگولار به این صورت هست که شما مقدار property موجود در کلاس رو میتونید بصورت رشته درون قالب نمایش بدید. مثلا اگه کلاس کامپوننت بصورت زیر تعریف شده باشه و my_name  یک پراپرتی از این کامپوننت باشه،

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  my_name = 'Hamid Haghdoost';
}

شما میتونید مثلا بصورت زیر به این پراپرتی درون قالب دسترسی داشته باشید

<p>my name is {{ my_name }}</p>

که اگه ng serve کنید خروجی بصورت زیر خواهد بود

my name is Hamid Haghdoost

property binding در انگولار

string interpolation در واقع نوع خاصی از property binding است که در آن نوع پراپرتی string است. یعنی شما نمیتونید مثلا مقدار boolean رو از این طریق به قالب ارسال کنید. برای این کار از property binding استفاده میکنیم. یعنی میتونیم مقدار پراپرتی رو به attribute های html و… بچسبونیم.

one way binding در angular
one way binding در انگولار

برای اینکه بیشتر متوجه موضوع بشید با مثال پیش میریم.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  isDisabled: boolean = false;
}

در کامپوننت بالا یک پراپرتی از نوع بولین تعریف شده که در قالب به html بایند شده است

<button [disabled]="isDisabled">Try Me</button>

توجه کنید که برای بایند کردن مقدار بولین نمیتونستیم بصورت زیر عمل کنیم و حتما باید از روش دوم استفاده کنیم

<button disabled="{{ isDisabled }}">Try Me</button>

امیدوارم حرفام به دردتون خورده باشه 🙂

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *