这篇文章主要介绍“Angular中的独立组件如何使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“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组件了：
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。
如果导入的话，可能会导致** 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}`;
}
}关于“Angular中的独立组件如何使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。
当前名称：Angular中的独立组件如何使用
地址分享：
http://chengdu.cdxwcx.cn/article/ghijeh.html
