本篇文章带大家了解一下angular中的独立组件，看看怎么在angular中创建一个独立组件，怎么在独立组件中导入已有的模块，希望对大家有所帮助！
Angular 14一项令人兴奋的特性就是Angular的独立组件终于来了。
在Angular 14中， 开发者可以尝试使用独立组件开发各种组件，但是值得注意的是Angular独立组件的API仍然没有稳定下，将来可能存在一些破坏性更新，所以不推荐在生产环境中使用。【相关教程推荐：《angular教程》】
如何创建一个独立组件
对于已有的组件，我们可以在@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组件了：
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。
如果导入的话，可能会导致** 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对象
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}`; }}
登录后复制
源代码
本文所使用的源代码：https://github.com/damingerdai/angular-standalone-components-app
线上demo：https://damingerdai.github.io/angular-standalone-components-app/
原文地址：https://juejin.cn/post/7107224235914821662
更多编程相关知识，请访问：编程视频！！
以上就是浅析Angular中的独立组件，看看怎么使用的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2700637.html
