极乐门资源网 Design By www.ioogu.com

本文主要给大家分享了关于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遇到的坑

极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com

评论“Angular 4.X开发实践中的踩坑小结”

暂无Angular 4.X开发实践中的踩坑小结的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。