简单谈谈Angular中的独立组件的使用

更新时间：2022年08月05日 08:49:14 作者：大明二代

这篇文章主要介绍了简单谈谈Angular中的独立组件的使用的相关资料,通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，需要的朋友可以参考下

前言

Angular 14一项令人兴奋的特性就是Angular的独立组件终于来了。

在Angular 14中，开发者可以尝试使用独立组件开发各种组件，但是值得注意的是Angular独立组件的API仍然没有稳定下，将来可能存在一些破坏性更新，所以不推荐在生产环境中使用。

如何创建一个独立组件

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

<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" rel="external nofollow"  target="_blank">Link</a>

效果图：

使用独立组件启动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}`;
  }
}

源代码

本文所使用的源代码

线上demo

您可能感兴趣的文章:

Angular2利用组件与指令实现图片轮播组件
这篇文章主要给大家介绍了Angular2中组件与指令的一个小实践，利用组件和指令实现一个图片轮播组件的相关资料，文中给出了详细的介绍和示例代码，需要的朋友可以参考学习，下面来一起看看吧。
2017-03-03
深入理解AngularJS中的ng-bind-html指令
ng-bind-html和ng-bind的区别就是,ng-bind把值作为字符串,和元素的内容进行绑定,但是ng-bind-html把值作为html,和元素的html进行绑定.相当于jq里面的.text()和.html()。这篇文章主要给大家深入的介绍了AngularJS中ng-bind-html指令的相关资料,需要的朋友可以参考下。
2017-03-03
如何以Angular的姿势打开Font-Awesome详解
这篇文章主要给大家介绍了关于如何以Angular的姿势打开Font-Awesome的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Angular具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2018-04-04
Angular6 发送手机验证码按钮倒计时效果实现方法
这篇文章主要介绍了Angular6 发送手机验证码按钮倒计时效果实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
AngularJS基础 ng-non-bindable 指令详细介绍
本文主要讲解AngularJS ng-non-bindable 指令,这里帮大家整理了ng-non-bindable指令的基本知识资料,有需要的小伙伴可以参考下
2016-08-08
详解AngularJS之$window窗口对象
本篇文章主要介绍了AngularJS之$window窗口对象，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
Angular2进阶之如何避免Dom误区
这篇文章主要介绍了Angular2进阶之如何避免Dom误区,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
使用AngularJS来实现HTML页面嵌套的方法
这篇文章主要介绍了使用AngularJS来实现HTML页面嵌套的方法,主要用到了AngularJS中的ng-include指令,需要的朋友可以参考下
2015-06-06
AngularJS实现图片上传和预览功能的方法分析
这篇文章主要介绍了AngularJS实现图片上传和预览功能的方法,结合HTML5实例形式对比分析了AngularJS图片上传的相关操作技巧与注意事项,需要的朋友可以参考下
2017-11-11
Angular中$broadcast和$emit的使用方法详解
本篇文章主要介绍了Angular中$broadcast和$emit的使用方法详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05