خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

نحوه ایجاد و استفاده از کامپوننت های خود در Angular

ارشیا یوسفی ادیب ۲۴ بهمن, ۱۴۰۲ 4 min read

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

کامپوننت یکی از مهم ترین بلوک های سازنده یک برنامه Angular است. کامپوننت ها بیت های کد قابل استفاده مجدد هستند که بخش های خاصی از وب سایت شما را تشکیل می دهند.

نمونه هایی از اجزایی که می توانید ایجاد کنید شامل عناصر رابط کاربری کوچکتر مانند دکمه ها یا کارت ها می شود. آنها همچنین می توانند شامل عناصر UI بزرگتر مانند نوارهای کناری، نوارهای پیمایش یا کل صفحات باشند.

استفاده از Component ها در Angular

هنگامی که کامپوننت هایی را در یک برنامه Angular ایجاد می کنید، می توانید آنها را در اجزای دیگر استفاده کنید. به عنوان مثال، می توانید یک مؤلفه برای یک عنصر کارت UI بزرگ ایجاد کنید. سپس می توانید از این مؤلفه به عنوان یک تگ معمولی HTML در هر جایی که دوست دارید استفاده کنید:

<app-new-component></app-new-component>

از آنجایی که کامپوننت ها بیت های کد قابل استفاده مجدد هستند، می توانید متغیرهایی را نیز ارسال کنید تا داده های هر نمونه متفاوت باشد. شما همچنین می توانید اجزایی برای صفحات ایجاد کنید و می توانید با استفاده از فایل app-routing.module.ts به آنها مسیریابی کنید.

شما می توانید اجزای خود را بر اساس ساختار برنامه خود و اینکه چقدر می خواهید عملکرد خود را از هم جدا کنید، طراحی کنید.

چگونه یک کامپوننت ایجاد کنیم

می توانید از دستور nggenerate برای ایجاد یک کامپوننت جدید استفاده کنید.

  1. یک برنامه Angular جدید با استفاده از ng new ایجاد کنید یا یک برنامه موجود را باز کنید.
  2. خط فرمان یا ترمینال را باز کنید. از طرف دیگر، اگر برنامه Angular خود را در یک IDE مانند Visual Studio Code باز دارید، می توانید از ترمینال داخلی استفاده کنید.
  3. در ترمینال، به محل پوشه ریشه پروژه بروید. برای مثال:cd C:\Users\Sharl\Desktop\Angular-Application
  4. دستور ng generate component را اجرا کنید و به دنبال آن نام کامپوننت جدید: ng generate component UI-card را اجرا کنید
  5. کامپوننت جدید در یک پوشه جدید در دایرکتوری src/app ایجاد می شود.
cd C:\Users\Sharl\Desktop\Angular-Application
ng generate component ui-card

نوار کناری VS Code که مکان مولفه کارت رابط کاربری جدید را نشان می دهد

نحوه اضافه کردن محتوا به کامپوننت Angular

Angular هر جزء را با یک فایل HTML، CSS، TypeScript و Testing Specification ایجاد می کند.

  • فایل HTML محتوای HTML جزء را ذخیره می کند.
  • فایل CSS استایل کامپوننت را ذخیره می کند.
  • فایل Testing Specification (spec.ts) هر آزمایش واحد را برای مؤلفه ذخیره می کند.
  • فایل TypeScript منطق و عملکردی را که مؤلفه را تعریف می کند ذخیره می کند.

مقداری محتوا را به مؤلفه کارت رابط کاربری سفارشی اضافه کنید.

  1. src/app/ui-card/ui-card.component.html را باز کنید و HTML مؤلفه را به‌روزرسانی کنید. مطمئن شوید که یک تصویر با همان نام در پوشه ای به نام src/assets/images در برنامه Angular خود دارید. محتوای ui-card.component.html را با موارد زیر جایگزین کنید:                 کوه‌های آبی

            

    NSW، استرالیا

        

  • ui-card.component.css را باز کنید و محتوای CSS را به مؤلفه اضافه کنید:.card {    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); عرض: 400 پیکسل؛ padding: 8px; حاشیه: 24 پیکسل رنگ پس زمینه: whitesmoke; font-family: sans-serif;} .cardimg {   max-width: 400px;} .title {    padding-top: 16px;} .container {    padding: 2px 16px;}
  • فایل ui-card.component.ts قبلاً شامل یک کلاس برای مؤلفه جدید است که در آن می توانید توابع، منطق و عملکردهای جدید اضافه کنید. باید به این صورت باشد:exportclass UiCardComponent OnInit {  constructor() {}  ngOnInit(): void {    // یک منطق کد را در اینجا اضافه کنید  }  // یا منطق و عملکرد خود را در توابع جدید اضافه کنید}
    • <divclass="card">
        <imgsrc="./assets/images/blue-mountains.jpg"alt="Avatar">
        <divclass="container">
            <h4class="title"> Blue Mountains </h4>
            <p> NSW, Australia </p>
        </div>
    </div>
    .card {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        width: 400px;
        padding: 8px;
        margin: 24px;
        background-color: whitesmoke;
        font-family: sans-serif;
    }
     
    .cardimg {
       max-width: 400px;
    }
     
    .title {
        padding-top: 16px;
    }
     
    .container {
        padding: 2px 16px;
    }
    exportclass UiCardComponent implements OnInit {
      constructor() { }
      ngOnInit(): void {
        // Add some code logic here
      }
      // Or, add your logic and functionality in new functions
    }

    نحوه استفاده از کامپوننت در HTML یک جزء دیگر

    در داخل ui-card.component.ts، سه ویژگی وجود دارد: selector، templateUrl و styleUrl. templateUrl به HTML کامپوننت اشاره دارد (و بنابراین به فایل HTML پیوند می دهد). ویژگی styleUrls به CSS کامپوننت و پیوند به فایل CSS اشاره دارد.

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

    وقتی از مؤلفه UI Card در مؤلفه دیگری استفاده می کنید، از نام انتخابگر «app-ui-card» استفاده می کنید.

    1. ابتدا مقداری محتوا به صفحه وب خود اضافه کنید. src/app/app.component.html را باز کنید و یک نوار ناوبری اضافه کنید:     نوار ناوبری وب
  • در src/app/app.component.css:.navbar-header {    background-color: #07393C; بالشتک: 30px 50px; صفحه نمایش: انعطاف پذیر align-اقلام: مرکز; font-family: sans-serif;} .nav-title {    text-decoration: none; رنگ سفید؛ اندازه فونت: 16pt;}
  • در زیر نوار ناوبری در app.component.html، یک کارت رابط کاربری جدید اضافه کنید. از نام انتخابگر “app-ui-card” به عنوان یک برچسب HTML استفاده کنید:
  • همچنین می توانید با اضافه کردن چندین بار برچسب، از مؤلفه مجدداً استفاده کنید. برای انجام این کار، خط بالا را جایگزین کنید و به جای آن از چندین تگ HTML app-ui-card استفاده کنید:      
  • برنامه Angular خود را با استفاده از دستور ng serve از ترمینال اجرا کنید و وب سایت خود را در یک مرورگر وب باز کنید.
    • <divclass="navbar-header">
        <aclass="nav-title"><b> Web Navbar </b></a>
    </div>
    .navbar-header {
        background-color: #07393C;
        padding: 30px 50px;
        display: flex;
        align-items: center;
        font-family: sans-serif;
    }
     
    .nav-title {
        text-decoration: none;
        color: white;
        font-size: 16pt;
    }
    <app-ui-card></app-ui-card>
    <divstyle="display: flex">
      <app-ui-card></app-ui-card>
      <app-ui-card></app-ui-card>
      <app-ui-card></app-ui-card>
    </div>

    مولفه کارت UI چندین بار در وب سایت استفاده می شود

    نحوه انتقال پارامترهای ورودی به کامپوننت

    از آنجایی که کامپوننت قابل استفاده مجدد است، ویژگی هایی وجود دارد که ممکن است بخواهید هر بار که از آن استفاده می کنید آنها را تغییر دهید. در این حالت می توانید از پارامترهای ورودی استفاده کنید.

    1. افزودن ورودی به لیست واردات در بالای ui-card.component.ts:import { Component, Input, OnInit } from’@angular/core’;
    2. سپس دو متغیر ورودی داخل کلاس UICardComponent اضافه کنید. اینها به شما امکان می دهند نام مکان و تصویر نمایش داده شده روی کارت را تغییر دهید. تابع ngOnInit را همانطور که نشان داده شده است پر کنید تا مسیر تصویر را بسازید یا از یک مقدار پیش فرض استفاده کنید:exportclass UiCardComponent پیاده سازی OnInit { @Input() locationName: string; @Input() نام تصویر: string; constructor() { }  ngOnInit(): void {    if (this.imageName) {      this.imageName = “./assets/images/” + this.imageName; } else {      this.imageName = “./assets/images/blue-mountains.jpg”; }  }}
    3. در ui-card.component.html، مقدار سخت کد شده Heading 4 “Blue Mountains” را تغییر دهید تا به جای آن از متغیر ورودی “locationName” استفاده کنید. همچنین برای استفاده از متغیر ورودی “imageName” ویژگی src کدگذاری شده سخت را در تگ تصویر تغییر دهید:         {{locationName ? locationname : ‘کوه های آبی’}}

              

      NSW, استرالیا

          

  • در app.component.html، برچسب‌های “app-ui-card” را تغییر دهید تا ورودی‌های “locationName” و “imageName” را شامل شود. برای هر عنصر کارت رابط کاربری، مقدار متفاوتی وارد کنید. مطمئن شوید که فایل‌های تصویر در پوشه دارایی‌ها/تصاویر برنامه Angular شما وجود دارند.      < app-ui-card [locationName]="'Newcastle'" [imageName]="'newcastle.jpg'">
  • برنامه Angular خود را با استفاده از دستور ng serve از ترمینال اجرا کنید و وب سایت خود را در یک مرورگر وب باز کنید.
    • import { Component, Input, OnInit } from'@angular/core';
    exportclass UiCardComponent implements OnInit {
      @Input() locationName: string;
      @Input() imageName: string;
     
      constructor() { }

      ngOnInit(): void {
        if (this.imageName) {
          this.imageName = "./assets/images/" + this.imageName;
        } else {
          this.imageName = "./assets/images/blue-mountains.jpg";
        }
      }
    }
    <divclass="card">
        <imgsrc="{{imageName}}"alt="Avatar">
        <divclass="container">
            <h4class="title">{{locationName ? locationName : 'Blue Mountains'}}</h4>
            <p>NSW, Australia</p>
        </div>
    </div>
    <divstyle="display: flex">
      <app-ui-card [locationName]="'Blue Mountains'" [imageName]="'blue-mountains.jpg'"></app-ui-card>
      <app-ui-card [locationName]="'Sydney'" [imageName]="'sydney.jpg'"></app-ui-card>
      <app-ui-card [locationName]="'Newcastle'" [imageName]="'newcastle.jpg'"></app-ui-card>
    </div>

    جزء کارت UI چندین بار با پارامترهای ورودی و داده های مختلف استفاده شده است

    ممکن است در این مرحله خطایی در مورد نداشتن اولیه‌کننده این ویژگی‌ها مشاهده کنید. اگر چنین است، فقط اضافه یا تنظیم کنید
    “strictPropertyInitialization”: نادرست است
    در شما
    tsconfig.json
    .

    نحوه مسیریابی به کامپوننت جدید

    اگر جزء شما نمایانگر بخش بزرگی از وب سایت شما مانند یک صفحه جدید است، می توانید به آن مؤلفه نیز مسیریابی کنید.

    1. app-routing.module.ts را باز کنید. وارد کردن مؤلفه کارت رابط کاربری در بالای فایل:import { UiCardComponent } from’./ui-card/ui-card.component’;
    2. یک مسیر مسیریابی به آرایه مسیرها اضافه کنید:const routes: Routes = [    // … هر مسیر دیگری که ممکن است نیاز داشته باشید …    { path: ‘uicard’, component: UiCardComponent },]
    3. تمام محتوای فعلی را در app.component.html جایگزین کنید تا فقط نوار ناوبری و یک تگ HTML خروجی روتر را شامل شود. خروجی روتر به شما امکان مسیریابی بین صفحات را می دهد. یک پیوند به نوار ناوبری اضافه کنید، با ویژگی href مطابق با مسیر در آرایه مسیرها:     نوار ناوبری وب کارت رابط کاربری

    4. به پیوند کارت رابط کاربری جدید، در app.component.css:.nav-a-link {    text-decoration: none، سبکی اضافه کنید. رنگ: #4b6569; اندازه فونت: 14pt; حاشیه سمت چپ: 60 پیکسل؛ وزن قلم: سبکتر؛}
    5. برنامه Angular خود را با استفاده از دستور ng serve از ترمینال اجرا کنید و وب سایت خود را در یک مرورگر وب باز کنید. پیوند در نوار ناوبری صفحه وب ظاهر می شود.
    6. به آدرس URL در مرورگر وب خود توجه داشته باشید. به طور پیش فرض، معمولاً http://localhost:4200/ است. وقتی روی پیوند کارت UI کلیک می کنید، صفحه به http://localhost:4200/uicard هدایت می شود و کارت UI ظاهر می شود.
    import { UiCardComponent } from'./ui-card/ui-card.component';
    const routes: Routes = [
        // ... Any other routes you may need ...
        { path: 'uicard', component: UiCardComponent },
    ]
    <divclass="navbar-header">
        <aclass="nav-title"><b> Web Navbar </b></a>
        <aclass="nav-a-link"href="/uicard"><b> UI Card </b></a>
    </div>

    <router-outlet></router-outlet>
    .nav-a-link {
        text-decoration: none;
        color: #4b6569;
        font-size: 14pt;
        margin-left: 60px;
        font-weight: lighter;
    }

    پیوند کارت رابط کاربری در نوار ناوبریپس از کلیک روی پیوند، جزء کارت روی صفحه نمایش داده می شود

    ایجاد کامپوننت در Angular

    کامپوننت یکی از بلوک های اصلی سازنده Angular است. کامپوننت ها به شما این امکان را می دهند که بخش های مختلف وب سایت خود را به بخش های کوچکتر و قابل استفاده مجدد تقسیم کنید. شما می توانید هر چیزی را به اجزای سازنده تبدیل کنید، از جمله دکمه های کوچکتر، کارت ها، نوارهای جانبی بزرگتر، و نوارهای ناوبری.

    همچنین می‌توانید از متغیرهای ورودی برای انتقال داده‌ها در نمونه‌های مختلف مؤلفه استفاده کنید. و می توانید با استفاده از مسیرهای URL به مؤلفه مسیریابی کنید.

    اگر در حال توسعه یک برنامه Angular جدید هستید، ممکن است لازم باشد یک نوار ناوبری برای کاربران خود بسازید تا بتوانند در اجزای شما حرکت کنند. داشتن یک نوار ناوبری پاسخگو به شما امکان می دهد آن را در دستگاه های مختلف، در اندازه های مختلف صفحه نمایش مشاهده کنید.

    مطلب مرتبط:   JSON در مقابل XML. تفاوت در چیست؟
    Tags: