Angular的独立组件怎么使用(angular,开发技术)

这篇文章主要介绍“Angular的独立组件怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Angular的独立组件怎么使用”文章能帮助大家解决问题。

如何创建一个独立组件

对于已有的组件，我们可以在@Component()中添加standalone: true的标识，然后我们可以在没有@NgModule()的情况下直接使用imports导入其他模块了。
如果是新建组件，可以使用ng generate component <name> --standalone的命令，直接创建一个独立组件, 例如：

nggeneratecomponentbutton-list--standalone

@Component({selector:'app-button-list',standalone:true,imports:[CommonModule,],templateUrl:'./button-list.component.html',styleUrls:['./button-list.component.scss']})exportclassButtonListComponentimplementsOnInit

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

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

imports:[CommonModule,MatButtonModule,],

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

<buttonmat-button>Basic</button><buttonmat-buttoncolor="primary">Primary</button><buttonmat-buttoncolor="accent">Accent</button><buttonmat-buttoncolor="warn">Warn</button><buttonmat-buttondisabled>Disabled</button><amat-buttonhref="https://damingerdai.github.io"rel="externalnofollow"target="_blank">Link</a>

效果图：

使用独立组件启动Angular应用

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

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

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

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

第三步，删除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对象

constROUTES: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()exportclassPhotosService{constructor(@Inject('photoUrl')privatephotoUrl:string,privatehttp:HttpClient){}publicgetPhotoUrl(i:number):string{return`${this.photoUrl}/200/300?random=${i}`;}}

关于“Angular的独立组件怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。