快捷導(dǎo)航

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

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

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

本文主要給大家分享了關(guān)于Angular 4.X開發(fā)中與到的一些踩坑經(jīng)驗(yàn)，分享出來供大家參考學(xué)習(xí)，下面來一起看看詳細(xì)的介紹：

一、使用ngIf或者ngSwitch出錯(cuò)

在html文件中使用ngIf或者ngSwitch時(shí)，會(huì)解析出錯(cuò)，錯(cuò)誤提示如下：

Error: Template parse errors:
Can't bind to 'ngSwitch' since it isn't a known property of 'div'.

這個(gè)是因?yàn)闆]有在此Component所在的Module中導(dǎo)入CommonModule，雖然你可能在AppModule中導(dǎo)入過了，但是還是需要導(dǎo)入一次，代碼如下：

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

二、多級(jí)依賴注入器

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

舉個(gè)例子，從登錄頁點(diǎn)擊登錄按鈕進(jìn)入主頁，LoginComponent和MainComponent都注入了LoginService。

登錄：

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

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

// login.component.ts
//登錄界面，只有一個(gè)登錄按鈕，點(diǎn)擊后登錄會(huì)把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
// 這個(gè)是登陸后的主界面

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，但是會(huì)使用不同的實(shí)例，所以會(huì)導(dǎo)致結(jié)果可能不同，需要注意。

總結(jié)

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

您可能感興趣的文章: