Sự khác biệt giữa declarations, providers và import trong NgModule là gì?

Trong Angular, NgModule là một cách để tổ chức và nhóm các thành phần, directive, pipes, và services mà bạn sử dụng trong ứng dụng của mình. Có ba thuộc tính chính trong @NgModule decorator mà bạn cần hiểu: declarations, providers, và imports.

• Declarations: Thuộc tính này được sử dụng để khai báo các components, directives, và pipes mà thuộc về module hiện tại. Mọi thứ được khai báo trong declarations sẽ biết đến nhau trong phạm vi của module đó. Chỉ những directives, components, hoặc pipes được khai báo hoặc được import từ module khác mới có thể được sử dụng trong HTML của module đó[1][2].

• Providers: Thuộc tính này được sử dụng để khai báo các services và các giá trị mà cần được biết đến bởi hệ thống dependency injection của Angular. Các services được thêm vào trong providers sẽ có phạm vi toàn cục và có thể được tiêm vào các services hoặc directives khác mà có nhu cầu sử dụng chúng[1][2].

• Imports: Thuộc tính này cho phép module hiện tại sử dụng các declarations được xuất bởi các module khác. Khi bạn import một module, bạn đang nói với Angular rằng bạn muốn sử dụng các components, directives, và pipes mà module đó cung cấp trong module của bạn. Điều này thường được sử dụng để thêm các module hỗ trợ như FormsModule, RouterModule, CommonModule, v.v. vào ứng dụng của bạn[1][2].

Một ví dụ về cách sử dụng tất cả ba thuộc tính này trong một NgModule:

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, HttpClientModule, FormsModule],
  providers: [UserService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Trong ví dụ trên, `AppCo...