کامپوننت ها بلوک های اصلی هر پروژه Angular هستند. در این مقاله به برخی از موضوعات پیشرفته در مورد کامپوننت ها می پردازیم، مانند نحوه ایجاد کامپوننت های پویا و همچنین نحوه ایجاد کامپوننت های پیشرفته در پروژه های Angular. اول از همه یاد می گیریم که چگونه کامپوننت های پویا در پروژه های Angular ایجاد کنیم.
بیایید فرض کنیم که من دو مؤلفه دارم، "اولین کامپوننت" و "جزء دوم". در ادامه محتوای هر دو جزء آورده شده است.
first.component.ts
- import { Component, OnInit } from '@angular/core';
- @Component({
- selector: 'app-first',
- templateUrl: './first.component.html',
- styleUrls: ['./first.component.css']
- })
- export class FirstComponent implements OnInit {
- message:string='';
- constructor() { }
- ngOnInit() {
- }
- }
first.component.html
- <p>
- {{message}}
- </p>
second.component.ts
- import { Component, OnInit } from '@angular/core';
- @Component({
- selector: 'app-second',
- templateUrl: './second.component.html',
- styleUrls: ['./second.component.css']
- })
- export class SecondComponent implements OnInit {
- constructor() { }
- message:string='';
- ngOnInit() {
- }
- }
second.component.html
- <p>
- {{message}}
- </p>
کامپوننت دیگری نیز دارم، کامپوننت “app” که در آن کامپوننتهای بالا را در زمانهای پویا بارگذاری میکنم.
App.component.ts
- import { Component } from '@angular/core';
- @Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
- })
- export class AppComponent {
- title = 'Advanced Angular App';
- }
App.component.html
- <!--The content below is only a placeholder and can be replaced.-->
- <div style="text-align:center">
- <h1>
- Welcome to {{title}}!
- </h1>
- <button type="button" >First Component</button>
- <button type="button" >Second Component</button>
- </div>
این کامپوننت "برنامه" جزء Bootstrap برنامه من است، بنابراین وقتی برنامه را اجرا می کنم صفحه زیر در مرورگر قابل مشاهده است.
اکنون وظیفه من این است که میخواهم یک مؤلفه را در یک زمان قابل مشاهده کنم، به این معنی که اگر روی دکمه «فرست مولفه» کلیک کنم، مؤلفه «اول» باید در مؤلفه برنامه من قابل مشاهده باشد و اگر روی دکمه «جزء دوم» کلیک کنم، سپس جزء "دوم" باید در مولفه برنامه قابل مشاهده باشد.
بنابراین رویکرد من برای رسیدن به این هدف چیست؟ اگر این سوال را از خود بپرسیم، فکر می کنم اولین راه حلی که به ذهن ما می رسد این باشد که هر دو جزء را به هر شرطی نشان دهیم. این بدان معناست که از مکانیسم نمایش/پنهان کردن برای رسیدن به هدف مانند زیر استفاده کنید.
- <!--The content below is only a placeholder and can be replaced.-->
- <div style="text-align:center">
- <h1>
- Welcome to {{title}}!
- </h1>
- <button type="button" >First Component</button>
- <button type="button" >Second Component</button>
- <div>
- <app-first *ngIf="componentVisible=='first'"></app-first>
- <app-second *ngIf="componentVisible=='second'"></app-second>
- </div>
- </div>
در خطوط کد بالا، یک متغیر "componentVisible" را می گیریم که در آن نام مؤلفه ای را که می خواهیم قابل مشاهده کنیم، اختصاص می دهیم. اگر مقدار متغیر "first" باشد، جزء "first" نمایش داده می شود، اگر مقدار "componentVisible" "second" باشد، مولفه "second" نمایش داده می شود. من می دانم که این رویکرد نیاز ما را برآورده می کند، اما برخی از مسائل در این رویکرد وجود دارد:
- طول کد فایل "App.component.html" را افزایش دهید
- اگر بیش از 2 جزء برای نمایش در پایه شرط داریم، دستور if را افزایش می دهیم.
- این یک رویکرد خوب برای کدنویسی نیست زیرا همه اجزا در مرحله اولیه سازی جزء "برنامه" بارگذاری می شوند که بر عملکرد برنامه تأثیر می گذارد.
بهترین رویکرد این است که زمان اجرای کامپوننت را در صورت نیاز بارگذاری کنیم. بارگذاری کامپوننت به صورت پویا عملکرد برنامه ما را افزایش می دهد و همچنین استاندارد کدگذاری برنامه را افزایش می دهد. بیایید یاد بگیریم که چگونه هر جزء را به صورت پویا بارگذاری کنیم.