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


Posted in Javascript onJuly 04, 2017

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

总结

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

Javascript 相关文章推荐
Javascript中eval函数的使用方法与示例
Apr 09 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
node.js中的fs.unlinkSync方法使用说明
Dec 15 Javascript
jquery实现弹出层效果实例
May 19 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
Aug 25 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 Javascript
js 毫秒转天时分秒的实例
Nov 17 Javascript
vue多层嵌套路由实例分析
Mar 19 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 #jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 #jQuery
jQuery简介_动力节点Java学院整理
Jul 04 #jQuery
JS实现给json数组动态赋值的方法示例
Mar 19 #Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 #Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 #jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 #jQuery
You might like
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
php中遍历二维数组并以表格的形式输出的方法
2017/01/03 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
可编辑下拉框的2种实现方式
2014/06/13 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
2015/09/27 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
使用javascript插入样式
2016/03/14 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
python单线程实现多个定时器示例
2014/03/30 Python
python+opencv轮廓检测代码解析
2018/01/05 Python
python3获取两个日期之间所有日期,以及比较大小的实例
2018/04/08 Python
pandas通过loc生成新的列方法
2018/11/28 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
德国最大的婴儿用品网上商店:Kidsroom.de(支持中文)
2020/09/02 全球购物
优秀导游先进事迹材料
2014/01/25 职场文书
个人自我鉴定总结
2014/03/25 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
父母教会我观后感
2015/06/17 职场文书
2016小学新学期寄语
2015/12/04 职场文书
2016年端午节寄语
2015/12/04 职场文书
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python