本文主要給大家分享了關于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變為trueimport { 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，但是會使用不同的實例，所以會導致結果可能不同，需要注意。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
