Angular 4.X开发实践中的踩坑小结
本文主要给大家分享了关于Angular4.X开发中与到的一些踩坑经验,分享出来供大家参考学习,下面来一起看看详细的介绍:
一、使用ngIf或者ngSwitch出错
在html文件中使用ngIf或者ngSwitch时,会解析出错,错误提示如下:
Error:Templateparseerrors: Can'tbindto'ngSwitch'sinceitisn'taknownpropertyof'div'.
这个是因为没有在此Component所在的Module中导入CommonModule,虽然你可能在AppModule中导入过了,但是还是需要导入一次,代码如下:
import{CommonModule}from'@angular/common'; @NgModule( { declarations:[], imports:[ CommonModule ], exports:[], providers:[] } ) exportclassMainModule{}
二、多级依赖注入器
Angular4.X拥有多级依赖注入系统,在一个注入器的范围内,依赖都是单例的。它使用冒泡机制,当一个组件申请获得一个依赖时,Angular先尝试用该组件自己的注入器来满足它。如果该组件的注入器没有找到对应的提供商,它就把这个申请转给它父组件的注入器来处理。如果那个注入器也无法满足这个申请,它就继续转给它的父组件的注入器。
举个例子,从登录页点击登录按钮进入主页,LoginComponent和MainComponent都注入了LoginService。
登录:
//login.service.ts //这个是登录服务 import{Injectable}from'@angular/core'; @Injectable() exportclassLoginService{ isLoggedIn:boolean=false; login(){ this.isLoggedIn=true; } }
//login.component.ts //登录界面,只有一个登录按钮,点击后登录会把LoginService中的isLoggedIn变为true import{Component,OnInit}from'@angular/core'; import{Router}from'@angular/router'; import{LoginService}from'../login/login.service'; @Component({ selector:'app-login', template:``, providers:[LoginService] }) exportclassLoginComponentimplementsOnInit{ constructor(privaterouter:Router,privateloginService:LoginService){} login(){ this.loginService.login(); console.log(this.loginService.isLoggedIn);//结果为true this.router.navigate(['/main']); } }
//main.component.ts //这个是登陆后的主界面 import{Component}from'@angular/core'; import{LoginService}from'../login/login.service'; @Component({ selector:'app-main', template:`HOME
`, providers:[LoginService] }) exportclassMainComponentimplementsOnInit{ privateuserType:string; constructor(privateloginService:LoginService){ console.log(this.loginService.isLoginIn);//结果为false } }
从上面的例子可以看出来,在不同的地方注入同样的Service,但是会使用不同的实例,所以会导致结果可能不同,需要注意。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对毛票票的支持。