站長(zhǎng)資訊網(wǎng)本篇文章帶大家了解一下Angular中的獨(dú)立組件，看看怎么在Angular中創(chuàng)建一個(gè)獨(dú)立組件，怎么在獨(dú)立組件中導(dǎo)入已有的模塊，希望對(duì)大家有所幫助！
Angular 14一項(xiàng)令人興奮的特性就是Angular的獨(dú)立組件終于來(lái)了。
在Angular 14中， 開(kāi)發(fā)者可以嘗試使用獨(dú)立組件開(kāi)發(fā)各種組件，但是值得注意的是Angular獨(dú)立組件的API仍然沒(méi)有穩(wěn)定下，將來(lái)可能存在一些破壞性更新，所以不推薦在生產(chǎn)環(huán)境中使用。【相關(guān)教程推薦：《angular教程》】
如何創(chuàng)建一個(gè)獨(dú)立組件
對(duì)于已有的組件，我們可以在@Component()中添加standalone: true的，然后我們可以在沒(méi)有@NgModule()的情況下直接使用imports導(dǎo)入其他模塊了。 如果是新建組件，可以使用ng generate component <name> --standalone的命令，直接創(chuàng)建一個(gè)獨(dú)立組件, 例如：
ng generate component button-list --standalone
@Component({ selector: 'app-button-list', standalone: true, imports: [ CommonModule, ], templateUrl: './button-list.component.html', styleUrls: ['./button-list.component.scss'] }) export class ButtonListComponent implements OnInit
在獨(dú)立組件中導(dǎo)入已有的模塊
我們可以在imports中添加已有的模塊，以MatButtonModule為例：
imports: [ CommonModule, MatButtonModule, ],
這樣子我們就可以在ButtonListComponent中使用MatButtonModule的mat-button組件了：
<button mat-button>Basic</button> <button mat-button color="primary">Primary</button> <button mat-button color="accent">Accent</button> <button mat-button color="warn">Warn</button> <button mat-button disabled>Disabled</button> <a mat-button href="https://damingerdai.github.io" target="_blank">Link</a>
效果圖：
使用獨(dú)立組件啟動(dòng)Angular應(yīng)用
第一步， 將AppComponent設(shè)置為獨(dú)立組件：
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], standalone: true, }) export class AppComponent {
第二步，將AppModule的imports中的導(dǎo)入的模塊加入到AppComponent的imports中,但是有兩個(gè)模塊例外： BrowserModule和BrowserAnimationsModule。
如果導(dǎo)入的話，可能會(huì)導(dǎo)致** BrowserModule have already been loaded. If you need access to common directives such as NgIf and NgFor, import the CommonModule instead.**的問(wèn)題：
第三步，刪除app.module.ts文件
最后一步， 將main.ts中的：
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err));
改為：
bootstrapApplication(AppComponent).catch(err => console.error(err));
這樣子我們就實(shí)現(xiàn)了使用獨(dú)立組件啟動(dòng)Angular組件了。
為獨(dú)立組件配置路由
我這里分別有三個(gè)獨(dú)立組件： HomeComponent, ButtonListComponent 和 ChipListComponent，
然后在main.ts中創(chuàng)建ROUTES對(duì)象
const ROUTES: Route[] = [ { path: '', pathMatch: 'full', redirectTo: 'home' }, { path: 'home', component: HomeComponent }, { path: 'button', loadComponent: () => import('./app/button-list/button-list.component').then( (mod) => mod.ButtonListComponent ), }, { path: 'chip', loadComponent: () => import('./app/chip-list/chip-list.component').then( (mod) => mod.ChipListComponent ), }, ];
其中ButtonListComponent和ChipListComponent使用loadComponent去實(shí)現(xiàn)路由懶加載。
然后在bootstrapApplication的第二個(gè)參數(shù)中使用providers注冊(cè)RouterModule好了。
bootstrapApplication(AppComponent, { providers: [ importProvidersFrom(RouterModule.forRoot([...ROUTES])), ], }).catch(err => console.error(err));
效果圖：
配置依賴注入
當(dāng)我們想要啟動(dòng)Angular應(yīng)用的時(shí)候，可能需要注入一些值或者服務(wù)。 在bootstrapApplication, 我們可以通過(guò)providers來(lái)注冊(cè)值或者服務(wù)。
比如，我有一個(gè)獲取圖片的url，需要注入到PhotoService中：
bootstrapApplication(AppComponent, { providers: [ { provide: 'photoUrl', useValue: 'https://picsum.photos', }, {provide: PhotosService, useClass: PhotosService }, importProvidersFrom(RouterModule.forRoot([...ROUTES])), importProvidersFrom(HttpClientModule) ], })
PhotoService代碼如下：
@Injectable()export class PhotosService { constructor( @Inject('photoUrl') private photoUrl: string, private http: HttpClient ) { } public getPhotoUrl(i: number): string { return `${this.photoUrl}/200/300?random=${i}`; } }
源代碼
本文所使用的源代碼：https://github.com/damingerdai/angular-standalone-components-app
線上demo：https://damingerdai.github.io/angular-standalone-components-app/
原文地址：https://juejin.cn/post/7107224235914821662
