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 相关文章推荐
用于table内容排序
Jul 21 Javascript
初识JQuery 实例一(first)
Mar 16 Javascript
MooBox 基于Mootools的对话框插件
Jan 20 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
详解VUE 数组更新
Dec 16 Javascript
JavaScript模块详解
Dec 18 Javascript
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 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
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
Java中final关键字详解
2015/08/10 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
jquery中ajax学习笔记一
2011/10/16 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
[07:06]2018DOTA2国际邀请赛寻真——卫冕冠军Team Liquid
2018/08/10 DOTA
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
Python实现的简单万年历例子分享
2014/04/25 Python
Python中的类学习笔记
2014/09/23 Python
python中实现定制类的特殊方法总结
2014/09/28 Python
Django发送html邮件的方法
2015/05/26 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
python实现图片插入文字
2019/11/26 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
css3实现信纸/同学录效果的示例代码
2018/12/11 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
英语系毕业生自荐信
2013/10/31 职场文书
商场开业庆典策划方案
2014/06/02 职场文书
工作调动申请报告
2015/05/18 职场文书
阿凡达观后感
2015/06/10 职场文书