Une brève analyse des composants indépendants dans Angular et voir comment les utiliser

Cet article vous présentera les composants indépendants dansAngular, comment créer un composant indépendant dans Angular et comment importer des modules existants dans le composant indépendant. J'espère qu'il vous sera utile !

Une caractéristique intéressante d'Angular 14 est que les composants indépendants d'Angular sont enfin là.

Dans Angular 14, les développeurs peuvent essayer d'utiliser des composants indépendants pour développer divers composants, mais il convient de noter que l'API des composants indépendants Angular n'est toujours pas stable et qu'il pourrait y avoir des mises à jour destructrices dans le futur, ce n'est donc pas le cas. Il est recommandé de l'utiliser dans un environnement de production. [Recommandations de tutoriel associées : "Tutoriel angulaire"]

Comment créer un composant indépendant

Pour les composants existants, nous pouvons ajouterautonome dans@Component(): true, alors nous pouvons utiliser directementimportspour importer d'autres modules sans@NgModule(). Si vous créez un nouveau composant, vous pouvez utiliser la commandeng generate composant --standalonepour créer directement un composant indépendant, par exemple :@Component()中添加standalone: true的，然后我们可以在没有@NgModule()的情况下直接使用imports导入其他模块了。 如果是新建组件，可以使用ng generate component --standalone的命令，直接创建一个独立组件, 例如：

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

在独立组件中导入已有的模块

我们可以在imports中添加已有的模块，以MatButtonModule为例：

imports: [ CommonModule, MatButtonModule, ],

这样子我们就可以在ButtonListComponent中使用MatButtonModule的mat-button组件了：

Basic Primary Accent Warn Disabled Link

效果图：

使用独立组件启动Angular应用

第一步， 将AppComponent设置为独立组件：

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], standalone: true, }) export class AppComponent {

第二步，将AppModule的imports中的导入的模块加入到AppComponent的imports中,但是有两个模块例外：BrowserModule和BrowserAnimationsModule。

如果导入的话，可能会导致**BrowserModulehave already been loaded. If you need access to common directives such as NgIf and NgFor, import theCommonModuleinstead.**的问题：

第三步，删除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));

这样子我们就实现了使用独立组件启动Angular组件了。

为独立组件配置路由

我这里分别有三个独立组件：HomeComponent,ButtonListComponent和ChipListComponent，

然后在main.ts中创建ROUTES对象

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去实现路由懒加载。

然后在bootstrapApplication的第二个参数中使用providers注册RouterModule好了。

bootstrapApplication(AppComponent, { providers: [ importProvidersFrom(RouterModule.forRoot([...ROUTES])), ], }).catch(err => console.error(err));

效果图：

配置依赖注入

当我们想要启动Angular应用的时候，可能需要注入一些值或者服务。 在bootstrapApplication, 我们可以通过providers来注册值或者服务。

比如，我有一个获取图片的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}`; } }

Importer des modules existants dans des composants indépendants

Nous pouvons ajouter des modules existants dans lesimports, prenonsMatButtonModulecomme exemple :

De cette façon, nous pouvons Utilisez le composantmat-buttondeMatButtonModuledansButtonListComponent:

Rendu :

Démarrez le Application angulaire utilisant des composants indépendants

La première étape consiste à définirAppComponentcomme composant indépendant :rrreee

Configurer le routage pour les composants indépendantsJ'ai trois composants indépendants ici :HomeComponent,ButtonListComponentetChipListComponent, Créez ensuite l'objet ROUTES rrreee dansmain.tsoùButtonListComponentetChipListComponentutilisent loadComponent pour implémenter le chargement paresseux des routes. Utilisez ensuiteproviderspour enregistrerRouterModuledans le deuxième paramètre debootstrapApplication. rrreeeRendu :

Configurer l'injection de dépendancesLorsque nous souhaitons démarrer une application Angular, nous devrons peut-être injecter certaines valeurs ou services. DansbootstrapApplication, nous pouvons enregistrer des valeurs ou des services via desfournisseurs. Par exemple, j'ai une url pour récupérer des photos, qui doit être injectée dansPhotoService: rrreeePhotoServiceLe code est le suivant : rrreeeSource codeCet article contient le code source utilisé : https://github.com/damingerdai/angular-standalone-components-appDémo en ligne : https://damingerdai.github.io/angular-standalone-components-app /Texte original Adresse : https://juejin.cn/post/7107224235914821662Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!