[Angular] Understanding the Angular Component providers property
Angular The Component Property Understanding
2023-09-14 08:59:14 时间
Let's say we have App.component.ts, it use provider inside component level:
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] providers: [LoadingService] }) export class AppComponent implements OnInit { }
What is mean is that all the child components under App component tree, will have 'LoadService' available. But the child component must appear in Template.
<app> <course-dialog></course-dialog> </app>
In this case, if we want to use "LoadService" inside 'CouseDialog' component, we don't need to add 'providers' in 'CourseDialog' component.
But we don't have '<course-dialog>' inside template. Instead we open dialog component like:
const dialogRef = this.dialog.open(CourseDialogComponent, dialogConfig);
It open the dialog dynamicly. Then we have to use providers.
@Component({ selector: 'courses-card-list', templateUrl: './courses-card-list.component.html', styleUrls: ['./courses-card-list.component.css'], providers: [LoaderService] }) export class CoursesCardListComponent { }
相关文章
- angular组件开发
- java错误:The superclass "javax.servlet.http.HttpServlet" was not found on the Java Bu
- SQLBackupAndFTP The server principal "NT AUTHORITYSYSTEM" is not able to access the database "xxxx"
- [Angular] Set Metadata in HTTP Headers with Angular HttpHeaders
- [Angular] Use Angular’s @HostBinding and :host(...) to add styling to the component itself
- [Angular] Alternative Themes - Learn the Host-Context Selector
- [Angular Directive] Create a Template Storage Service in Angular 2
- [Angular2 Router] Optional Route Query Parameters - The queryParams Directive and the Query Parameters Observable
- [Angular 2] Nesting Elements in Angular 2 Components with ng-content (AKA Angular 2 Transclusion)
- [Angular 2] Simple intro Http
- [Angular 2] Exposing component properties to the template
- [Angular] The Select DOM Event and Enabling Text Copy
- [Angular] Working with FormArray
- [Angular2 Router] Optional Route Query Parameters - The queryParams Directive and the Query Parameters Observable
- [Angular2 Router] Understand the Angular 2 Base href Requirement
- [Angular 2] ng-control & ng-control-group
- Angular jasmine单元测试框架spied method的调用记录数据结构
- The data replication requires the processing of single BDoc instances
- Angular的scope. apply和CRM WebClient UI的modify方法
- 深入学习SAP UI5框架代码系列之八:谈谈 SAP UI5 的视图控件 ID,以及 SAP UI5 视图和 Angular 视图的异同
- Angular jasmine单元测试框架spec的运行时数据结构
- Angular module加载的原理研究
- 如何在Angular项目里创建新的Service
- Sentinel采用SphO方式定义资源,报错:The order of entry exit can‘t be paired with the order of entry