Angular 4.X开发实践中的踩坑小结

本文主要给大家分享了关于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，但是会使用不同的实例，所以会导致结果可能不同，需要注意。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。

# angularjs4 # angularjs的坑 # angular遇到的坑 # Angular2平滑升级到Angular4的步骤详解 # Web前端框架Angular4.0.0 正式版发布 # Angular 4.x 路由快速入门学习 # 详解Angular 4.x 动态创建组件 # Angular 4.x 动态创建表单实例 # Angular4 中常用的指令入门总结 # Angular 4 指令快速入门教程 # 详解Angular 4 表单快速入门 # 自己的 # 都是 # 是因为 # 过了 # 在此 # 能在 # 就把 # 给大家 # 你可 # 只有一个 # 可以看出 # 会把 # 这篇文章 # 谢谢大家 # 它就 # 没有找到 # 需要注意 # 中与 # 举个例子 # 错误提示

返回目录在线咨询

上一篇：php数据整理中怎么对数组进行反向分组_php按分组反向聚合与结果倒序输出技巧
下一篇：西安PHP网站建设：打造高效稳定的网络平台

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

Angular 4.X开发实践中的踩坑小结

您的项目需求