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

网友投稿 253 2023-05-03


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(

{

BKpFAPiRoo 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:``,

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: `

providers: [LoginService]

})

export class MainComponent implements OnInit {

private userType: string ;

constructor(private loginService: LoginService) {

console.log(this.loginService.isLoginIn); //结果为false

}

}

从上面的例子可以看出来,在不同的地方注入同样的Service,但是会使用不同的实例,所以会导致结果可能不同,需要注意。

总结

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


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Eclipse查看开发包jar里源代码的方法
下一篇:5分钟打造简易高效的webpack常用配置
相关文章

 发表评论

暂时没有评论,来抢沙发吧~