Окремі компоненти в Angular
Що таке самостійні компоненти?
Самостійні компоненти (Angular 14+) — це компоненти, які не потрібно оголошувати в NgModule. Вони безпосередньо керують своїми залежностями, що робить Angular-додатки простішими та більш модульними.
Традиційні vs Самостійні
typescript
// ❌ Традиційний: Потрібно оголосити в NgModule
@Component({ selector: 'app-hello' })
export class HelloComponent {}
@NgModule({
declarations: [HelloComponent],
imports: [CommonModule],
exports: [HelloComponent],
})
export class HelloModule {}typescript
// ✅ Самостійний: Самодостатній
@Component({
selector: 'app-hello',
standalone: true,
imports: [CommonModule], // Імпортувати залежності безпосередньо
template: \`
<h1 *ngIf="show">Привіт, {{ name }}!</h1>
\`
})
export class HelloComponent {
@Input() name = 'Світ';
show = true;
}Завантаження без NgModule
typescript
// main.ts — Не потрібен AppModule!
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { routes } from './app/app.routes';
bootstrapApplication(AppComponent, {
providers: [
provideRouter(routes),
provideHttpClient(),
],
});Використання самостійних компонентів
typescript
// В іншому самостійному компоненті
@Component({
standalone: true,
imports: [HelloComponent, UserCardComponent], // Імпортувати інші самостійні компоненти
template: \`
<app-hello name="Angular" />
<app-user-card [user]="currentUser" />
\`
})
export class DashboardComponent {}Ліниве завантаження самостійних компонентів
typescript
// У маршрутах
export const routes: Routes = [
{
path: 'admin',
loadComponent: () => import('./admin/admin.component')
.then(m => m.AdminComponent),
},
];Самостійні директиви та труби
typescript
@Directive({
selector: '[appHighlight]',
standalone: true,
})
export class HighlightDirective { /* ... */ }
@Pipe({
name: 'truncate',
standalone: true,
})
export class TruncatePipe implements PipeTransform { /* ... */ }Переваги
| Перевага | Опис |
|---|---|
| Без шаблонного коду NgModule | Компоненти керують своїми залежностями |
| Кращий tree-shaking | Невикористовувані компоненти видаляються |
| Простішe ліниве завантаження | loadComponent замість loadChildren з модулем |
| Легше вивчати | Менше концепцій для новачків |
| Поступове впровадження | Поєднання самостійних + модульних |
Важливо:
Самостійні компоненти є рекомендованим підходом для нових Angular-додатків. Вони усувають шаблонний код NgModule, покращують tree-shaking і спрощують ліниве завантаження. Встановіть standalone: true і імпортуйте залежності безпосередньо. Використовуйте bootstrapApplication() замість platformBrowserDynamic().bootstrapModule().
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.