Standalone trong Angular (>=v.14)
Tổng quan:
- Standalone components là một dạng component để đơn giản việc build ứng dụng trong Angular. Standalone components, directives hoặc pipes những khái niệm này có thể xem là một giải pháp để giảm sự phụ thuộc trong khai báo NgModules.
- Standalone components không thuộc Angular module, theo cách thông thường component được khai báo trong mảng declarations. Trường hợp này Angular sẽ báo lỗi khi cố gắng khai báo standalone component trong declaration.
1. Standalone component
Tạo Standalone Component bằng cli:
ng g p search --standalone- tạo standalone pipe.ng g d credit-card --standalone- tạo standalone directive.ng g c login --standalone- tạo standalone component.
@Component({ standalone: true, selector: 'photo-gallery', imports: [ImageGridComponent], template: ` ... <image-grid [images]="imageList"></image-grid> `,
})
export class PhotoGalleryComponent { // component logic
} 2. Dependencies trong Standalone Component
Standalone Component sử dụng nhiều dependencies (components, directives, pipes, ... ). Trường hợp này có 2 dạng:
- Standalone
- Dependencies thuộc module
Cả 2 dạng đều dùng keyword import của @Component decorator. Ví dụ đoạn code sau đây:
@Component({ selector: 'app-login', standalone: true, imports: [CommonModule, ReactiveFormsModule], templateUrl: './login.component.html', styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
3. Using a Standalone Component
Dùng standalone component trong AppComponent import trong NgModule.
@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, LoginComponent ], providers: [], bootstrap: [AppComponent]
})
export class AppModule { }
Các trường hợp sử dụng
- Component không phụ thuộc, sử dụng độc lập vào NgModule.
- Directives, Pipes ít sử dụng hoặc hạn chế sử dụng.