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中导入过了，但是还是需要导入一次，代码如下 在Angular 4.X的开发实践中，开发者可能会遇到各种问题，这些问题通常是由于对框架的理解不足或配置不正确导致的。本文将聚焦于两个常见的问题：使用`ngIf`或`ngSwitch`时出现的模板解析错误，以及多级依赖注入器带来的误解。 让我们讨论在HTML模板中使用`ngIf`或`ngSwitch`指令时遇到的问题。当尝试在组件的HTML模板中使用这些结构指令，如`*ngIf`或`*ngSwitch`，如果遇到"Can't bind to 'ngSwitch' since it isn't a known property of 'div'"这样的错误，原因很可能是当前组件模块未导入`CommonModule`。尽管`CommonModule`可能已经在`AppModule`中被导入，但每个单独的组件模块都需要有自己的导入，因为Angular的模块是隔离的。为解决这个问题，可以在组件的模块中添加以下代码： ```typescript import { CommonModule } from '@angular/common'; @NgModule({ declarations: [ ], imports: [CommonModule], exports: [ ], providers: [ ] }) export class MainModule { } ``` 这里，`MainModule`是包含使用`ngIf`或`ngSwitch`指令的组件的模块。确保每个需要这些指令的组件模块都导入了`CommonModule`，以避免解析错误。 接下来，我们转向第二个话题，即Angular的多级依赖注入系统。Angular的依赖注入系统设计用于管理组件和服务之间的依赖关系，并且支持多层次的注入器。当一个组件请求一个服务时，Angular会从当前组件的注入器开始，沿着组件树向上搜索，直到找到提供该服务的注入器。这个过程称为“冒泡”机制。 举个例子，假设我们有两个组件`LoginComponent`和`MainComponent`，它们都注入了`LoginService`。如果在各自的组件定义中都提供了`LoginService`，那么每个组件将拥有独立的服务实例。如下所示： ```typescript // login.service.ts @Injectable() export class LoginService { isLoggedIn: boolean = false; login() { this.isLoggedIn = true; } } // login.component.ts @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 @Component({ selector: 'app-main', template: `<h1>HOME</h1>`, providers: [LoginService] }) export class MainComponent implements OnInit { constructor(private loginService: LoginService) { console.log(this.loginService.isLoggedIn); // 结果为false } } ``` 在这个例子中，`LoginComponent`和`MainComponent`各自创建了一个`LoginService`的实例，导致在`MainComponent`中检查`isLoggedIn`属性时得到`false`，而不是在`LoginComponent`中设置的`true`。这是因为每个组件都有其独立的注入器，提供自己的服务实例。 为了避免这种问题，通常的做法是不在组件级别提供服务，而是将其放在更高层级的模块（如`AppModule`）中，或者创建一个共享模块，然后在需要使用服务的模块中导入该共享模块。这样，所有组件都将使用同一服务实例，确保数据的一致性。 总结来说，理解和妥善处理Angular的模板解析错误以及依赖注入机制是提升开发效率和代码质量的关键。正确导入`CommonModule`以使用结构指令，以及合理地管理服务的提供和注入，能够帮助开发者避免不必要的陷阱，确保应用的正常运行和数据的一致性。在实际开发中，不断学习和总结经验，将有助于提高Angular开发的专业技能。