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:`Login`,
 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://cdkjz.cn/article/gihgg.html