您好,登录后才能下订单哦!
这篇文章主要介绍“Angular的独立组件怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Angular的独立组件怎么使用”文章能帮助大家解决问题。
对于已有的组件,我们可以在@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>
效果图:
第一步, 将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的独立组件怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。