快捷導(dǎo)航

Angular 4.X開發(fā)實踐中的踩坑小結(jié)

更新時間：2017年07月04日 10:30:09 作者：JerryMissTom

這篇文章主要給大家介紹了關(guān)于Angular 4.X開發(fā)實踐中的一些踩坑經(jīng)驗，文中主要介紹的是使用ngIf或者ngSwitch出錯以及多級依賴注入器的相關(guān)內(nèi)容，需要的朋友可以參考借鑒，下面來一起看看吧。

本文主要給大家分享了關(guān)于Angular 4.X開發(fā)中與到的一些踩坑經(jīng)驗，分享出來供大家參考學(xué)習(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中導(dǎo)入CommonModule，雖然你可能在AppModule中導(dǎo)入過了，但是還是需要導(dǎo)入一次，代碼如下：

import { CommonModule } from '@angular/common';
@NgModule(
 {
  declarations: [ ],
  imports: [
   CommonModule
  ],
  exports: [ ],
  providers: [ ]
 }
)
export class MainModule { }

二、多級依賴注入器

Angular 4.X擁有多級依賴注入系統(tǒng)，在一個注入器的范圍內(nèi)，依賴都是單例的。它使用冒泡機制，當一個組件申請獲得一個依賴時，Angular 先嘗試用該組件自己的注入器來滿足它。如果該組件的注入器沒有找到對應(yīng)的提供商，它就把這個申請轉(zhuǎn)給它父組件的注入器來處理。如果那個注入器也無法滿足這個申請，它就繼續(xù)轉(zhuǎn)給它的父組件的注入器。

舉個例子，從登錄頁點擊登錄按鈕進入主頁，LoginComponent和MainComponent都注入了LoginService。

登錄：

//login.service.ts
// 這個是登錄服務(wù)
import { Injectable } from '@angular/core';

@Injectable()
export class LoginService {
 isLoggedIn: boolean = false;
 login(){
  this.isLoggedIn=true;
 }
}

// login.component.ts
//登錄界面，只有一個登錄按鈕，點擊后登錄會把LoginService中的isLoggedIn變?yōu)閠rue

import { 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); //結(jié)果為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); //結(jié)果為false
 }
}

從上面的例子可以看出來，在不同的地方注入同樣的Service，但是會使用不同的實例，所以會導(dǎo)致結(jié)果可能不同，需要注意。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: