معرفی
در این مقاله قصد داریم کاربرد درون یابی را یاد بگیریم. به طور کلی، ما جزء ثابت را از HTML درون خطی یا از templateUrl نمایش می دهیم. اگر بخواهیم برخی از چیزها به صورت پویا تغییر کنند چه؟ فرض کنید باید نام کاربری فعلی و نوع کاربر را نشان دهیم -- سپس باید از درون یابی استفاده کنیم. این مقادیر پویا از هر منبعی از طریق API یا سرویس ها می آیند.
پیش نیازها
- HTML، CSS و JS
- مبانی تایپ اسکریپت.
اجازه دهید یک نمونه TestApp ایجاد کنیم. برای این کار باید ابزارهای زیر را برای محیط توسعه نصب کنید:
- گره
- Npm (هنگامی که گره را نصب می کنید می آید)
- CLI زاویه ای
- ویرایشگر متن
برای ایجاد یک برنامه جدید دستور زیر را در محل خود اجرا کنید.
> ng TestApp جدید
پس از تکمیل فرمان، پوشه TestApp در پوشه نمونه شما ایجاد می شود.
اکنون، پوشه پروژه خود را به نام "TestApp" خواهید داشت.
توجه داشته
باشید مقاله قبلی من " شروع به کار با Angular CLI را ببینید. ” اگر نصب و معرفی را از پایه می خواهید، با اجرای نمونه برنامه شروع کنید.
اجازه دهید یک جزء ساده ایجاد کنیم.
ترمینال یکپارچه را باز کنید و دستور زیر را اجرا کنید.
> تست ng gc
- g برای تولید
- c برای جزء
تست یک نام جزء است.
اجازه دهید یک ویژگی جدید در داخل کلاس ایجاد کنیم و آن را username بنامیم. مقداری تعیین کنید حال، چگونه میتوانیم مقدار ویژگی جدید اضافه شده در قالب HTML را دریافت کنیم؟ منبع مهاربندهای مجعد دوتایی {{}} است و در داخل مهاربندهای مجعد دوتایی، خاصیت را مشخص میکنیم. این روش تعیین خاصیت داخل مهاربندهای دوبل فر برای نشان دادن مقادیر به عنوان درون یابی در Angular شناخته می شود. درون یابی صرفاً به معنای ارزیابی مقدار درون رشته پرانتز دوتایی و نمایش آن مقدار در صفحه HTML است.
test.component.ts را باز کنید
- import {
- Component,
- OnInit
- } from '@angular/core';
- @Component({
- selector: 'app-test',
- templateUrl: './test.component.html',
- styleUrls: ['./test.component.css']
- })
- export class TestComponent implements OnInit {
- userName = "Irshad";
- constructor() {}
- ngOnInit() {}
- }
ویژگی مورد نظر 'username' را که در نمای HTML خود استفاده خواهیم کرد، اضافه کنید.