最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

這篇文章主要講解了如何解決angula中使用iframe點擊后不執(zhí)行變更檢測的問題，內(nèi)容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

我們提供的服務有：網(wǎng)站建設、成都網(wǎng)站建設、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、曲水ssl等。為成百上千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術(shù)的曲水網(wǎng)站制作公司

這個問題是上周的，當時覺得這個問題的解決辦法太簡單了，不用寫博客記錄，但是潘老師今天今天又遇到了需要使用這個的地方，感覺問題雖然不難，但是，寫篇博客，方便自己查詢，也給了其他人搜索到解決辦法的機會。

問題描述

項目中使用到了ifame，理想狀態(tài)是:當點擊ifame中的按鈕時，將會調(diào)用通過angular寫的一個函數(shù)，函數(shù)將會修改一個ngif的判斷條件，顯示一個彈窗,

但現(xiàn)實是:當點擊ifame中的按鈕時，將會調(diào)用通過angular寫的一個函數(shù)，函數(shù)將會修改一個ngif的判斷條件,然后就沒有然后了.

開始的時候自己直接懵了, 方法確實執(zhí)行了, 但界面沒修改, 問了問潘老師, 潘老師說看看生命周期函數(shù)是否執(zhí)行了, 果然, 所有的生命周期函數(shù)都沒有調(diào)用。

解決辦法

既然生命周期函數(shù)沒調(diào)用，我們讓他調(diào)用不就行了，值已經(jīng)變化了，但是界面不變化，說明，angular 不知道值變化了，所以我們可以讓angular 主動進行變更檢測，讓它知道已經(jīng)發(fā)生了變化。

對此我們可以使用 ChangeDetectorRef

變化監(jiān)測類 - ChangeDetectorRef

Angular 在整個運行期間都會為每一個組件創(chuàng)建 ChangeDetectorRef 的實例，該實例提供了相關(guān)方法來手動管理變化監(jiān)測。有了這個類，我們自己就可以自定義組件的變化監(jiān)測策略了，如停止/啟用變化監(jiān)測或者按指定路徑變化監(jiān)測等等。

它有以下方法：

• markForCheck()：把根組件到該組件之間的這條路徑標記起來，通知Angular在下次觸發(fā)變化監(jiān)測時必須檢查這條路徑上的組件。
• detach()：從變化監(jiān)測樹中分離變化監(jiān)測器，該組件的變化監(jiān)測器將不再執(zhí)行變化監(jiān)測，除非再次手動執(zhí)行reattach()方法。
• reattach()：把分離的變化監(jiān)測器重新安裝上，使得該組件及其子組件都能執(zhí)行變化監(jiān)測。
• detectChanges()：手動觸發(fā)執(zhí)行該組件到各個子組件的一次變化監(jiān)測。

所以，我們可以使用 detectChanges() 來達到目標

使用方法

// 在組件中注入
 constructor(private changeDetectorRef: ChangeDetectorRef) {
 }
 
 // 直接使用
 test() {
 this.changeDetectorRef.detectChanges()
 }

angular何時進行變化檢測

總結(jié)起來, 主要有如下幾種情況:

• 用戶輸入操作，比如點擊，提交等
• 請求服務端數(shù)據(jù)(XHR)
• 定時事件，比如 setTimeout ， setInterval

Angular并不是捕捉對象的變動，它采用的是在適當?shù)臅r機去檢驗對象的值是否被改動，這個時機就是這些異步事件的發(fā)生。

這個時機是由 Zone.js 去掌控的，它獲取到了整個應用的執(zhí)行上下文，能夠?qū)ο嚓P(guān)的異步事件發(fā)生、完成或者異常等進行捕獲，然后驅(qū)動 Angular 的變化監(jiān)測機制執(zhí)行。

Zone.js的作用

實際上 Zone,js 有一個叫猴子補丁的東西。在 Zone.js 運行時，就會為這些異步事件做一層代理包裹，也就是說Zone.js運行后，調(diào)用 setTimeout、addEventListener 等瀏覽器異步事件時，不再是調(diào)用原生的方法，而是被猴子補丁包裝過后的代理方法。代理里setup了鉤子函數(shù), 通過這些鉤子函數(shù), 可以方便的進入異步任務執(zhí)行的上下文

//以下是Zone.js啟動時執(zhí)行邏輯的抽象代碼片段
function zoneAwareAddEventListener() {...}
function zoneAwareRemoveEventListener() {...}
function zoneAwarePromise() {...}
function patchTimeout() {...}
window.prototype.addEventListener=zoneAwareAddEventListener;
window.prototype.removeEventListener=zoneAwareRemoveEventListener;
window.prototype.promise = zoneAwarePromise;
window.prototype.setTimeout = patchTimeout;

關(guān)于 Zone.js 的詳細內(nèi)容可以看 這篇文章 。

angular變化檢測策略

angular 提供了兩種變更檢測策略，除了上述得Default外還有一種 OnPush 的檢測機制

OnPush 與 Default 之間的差別： 當檢測到與子組件輸入綁定的值沒有發(fā)生改變時，變化檢測就不會深入到子組件中去 。

一個OnPush的例子

app.comonent.ts

@Component({
 selector: 'app-root',
 template: `
 
{{title}}
 
user.name: {{user.name}}
  改變屬性
 
 
  改變對象
 
 
 `,
})
export class AppComponent {
 title = 'OnPush Demo';
 user: User = new User({name: 'yunzhi'});

 changeUserName() {
 this.user.name = 'new name';
 }

 changeUserObject() {
 this.user = new User({name: 'new user'});
 }
}

test.component.ts

@Component({
 selector: 'app-test',
 template: `
 

  
test 組件
  

  User:
  {{user.name}}
  
 
`,
 // 使用OnPush模式只需要加上下面這段代碼
 changeDetection: ChangeDetectionStrategy.OnPush
})
export class TestComponent implements OnInit {
 @Input() user: User;

 constructor() {
 }

 ngOnInit() {
 }

}

這時當我們點擊改變屬性按鈕時test組件顯示的并不會變化，只有改變user得引用test組件顯示的才會變化，如下圖所示

看完上述內(nèi)容，是不是對如何解決angula中使用iframe點擊后不執(zhí)行變更檢測的問題有進一步的了解，如果還想學習更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。