本文主要给大家分享了关于Angular 4.X开发中与到的一些踩坑经验，分享出来供大家参考学习，下面来一起看看详细的介绍：
一、使用ngIf或者ngSwitch出错
在html文件中使用ngIf或者ngSwitch时，会解析出错，错误提示如下：
这个是因为没有在此Component所在的Module中导入CommonModule，虽然你可能在AppModule中导入过了，但是还是需要导入一次，代码如下：
二、多级依赖注入器
Angular 4.X拥有nofollow" target="_blank" href="https://www.angular.cn/docs/ts/latest/guide/hierarchical-dependency-injection.html">多级依赖注入系统，在一个注入器的范围内，依赖都是单例的。它使用冒泡机制，当一个组件申请获得一个依赖时，Angular 先尝试用该组件自己的注入器来满足它。 如果该组件的注入器没有找到对应的提供商，它就把这个申请转给它父组件的注入器来处理。 如果那个注入器也无法满足这个申请，它就继续转给它的父组件的注入器。
举个例子，从登录页点击登录按钮进入主页，LoginComponent和MainComponent都注入了LoginService。
登录：
@Injectable()
export class LoginService {
isLoggedIn: boolean = false;
login(){
this.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']);
}
}
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，但是会使用不同的实例，所以会导致结果可能不同，需要注意。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。
原文链接：https://www.f2er.com/js/38145.html