Angular4.X开发实践中会遇到哪些问题-创新互联
这篇文章给大家分享的是有关Angular 4.X开发实践中会遇到哪些问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
创新互联公司是一家企业级云计算解决方案提供商,超15年IDC数据中心运营经验。主营GPU显卡服务器,站群服务器,服务器托管雅安,海外高防服务器,服务器机柜,动态拨号VPS,海外云手机,海外云服务器,海外服务器租用托管等。一、使用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:``, 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: `HOME
`, providers: [LoginService] }) export class MainComponent implements OnInit { private userType: string ; constructor(private loginService: LoginService) { console.log(this.loginService.isLoginIn); //结果为false } }
从上面的例子可以看出来,在不同的地方注入同样的Service,但是会使用不同的实例,所以会导致结果可能不同,需要注意。
感谢各位的阅读!关于“Angular 4.X开发实践中会遇到哪些问题”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享标题:Angular4.X开发实践中会遇到哪些问题-创新互联
文章位置:http://myzitong.com/article/gihgg.html