Angular 6: Begynderfejl

(Last Updated On: 3. september 2018)

Jeg starter dette dokument, for at minde mig selv om de fejl jeg IKKE må begå igen.

Change Detection og indexedDB = blødende memory leak

Hver eneste gang en variabel ændrer værdi, vil Angular kører en såkaldt “change detection”. Dvs. at DOM opdateres i henhold til ændringen. Hvis du f.eks. har en [ngClass]="doSomething()" på samtlige felter i en formular, vil den funktion således blive kaldt rigtig mange gange… og hvis den funktion henter noget i localStorage via en async/await funktion, kan det gå helt galt.

Med “helt galt” mener jeg at browseren pludselig bruger 130-150% cpu og al anden kommunikation med localStorage pludselig tager en hulans tid, hvis det overhovedet kan lade sig gøre.

Jeg omskrev min funktion således at værdien hentes i databasen een gang for alle under initialisering, og dermed kan hentes i en lokal variabel:

Før:

async doSomething() {
  return await getFromIndexedDB();
}

async doSomething() {

return await getFromIndexedDB();

}

Efter:

ngOnInit() {
  getFromIndexedDB().then(val => {
    this.localVariabel = val;
  })
}

doSomething() {
  return this.localVariabel;
}

ngOnInit() {

getFromIndexedDB().then(val => {

this.localVariabel = val;

})

}

doSomething() {

return this.localVariabel;

}