本文主要给大家分享了关于angular 4.x开发中与到的一些踩坑经验,分享出来供大家参考学习,下面来一起看看详细的介绍:
一、使用ngif或者ngswitch出错
在html文件中使用ngif或者ngswitch时,会解析出错,错误提示如下:
error: template parse errors: can't bind to 'ngswitch' since it isn't a known property of 'div'.
这个是因为没有在此component所在的module中导入commonmodule,虽然你可能在appmodule中导入过了,但是还是需要导入一次,代码如下:
import { commonmodule } from '@angular/common'; @ngmodule( { declarations: [ ], imports: [ commonmodule ], exports: [ ], providers: [ ] } ) export class mainmodule { }
二、多级依赖注入器
angular 4.x拥有系统,在一个注入器的范围内,依赖都是单例的。它使用冒泡机制,当一个组件申请获得一个依赖时,angular 先尝试用该组件自己的注入器来满足它。 如果该组件的注入器没有找到对应的提供商,它就把这个申请转给它父组件的注入器来处理。 如果那个注入器也无法满足这个申请,它就继续转给它的父组件的注入器。
举个例子,从登录页点击登录按钮进入主页,logincomponent和maincomponent都注入了loginservice。
登录:
//login.service.ts // 这个是登录服务 import { injectable } from '@angular/core'; @injectable() export class loginservice { 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:`<button (click)=login()>login</button>`, providers: [loginservice] }) export class logincomponent implements oninit { constructor(private router: router, private loginservice: 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: `<h1>home</h1>`, providers: [loginservice] }) export class maincomponent implements oninit { private usertype: string ; constructor(private loginservice: loginservice) { console.log(this.loginservice.isloginin); //结果为false } }
从上面的例子可以看出来,在不同的地方注入同样的service,但是会使用不同的实例,所以会导致结果可能不同,需要注意。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对移动技术网的支持。
如对本文有疑问, 点击进行留言回复!!
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
分享Angular http interceptors 拦截器使用(推荐)
网友评论