cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(aio): simplify DocViewer

Browse Source
This commit is contained in:
Ward Bell 2017-05-04 00:37:55 -07:00 committed by Pete Bacon Darwin
parent 2f66932bd1
commit aec65dee71
1 changed files with 6 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
aio/src/app/layout/doc-viewer/doc-viewer.component.ts
View File

@ -26,7 +26,7 @@ const initialDocViewerContent = initialDocViewerElement ? initialDocViewerElemen
}) })
export class DocViewerComponent implements DoCheck, OnDestroy { export class DocViewerComponent implements DoCheck, OnDestroy {
private displayedDoc: DisplayedDoc; private embeddedComponents: ComponentRef<any>[] = [];
private embeddedComponentFactories: Map<string, EmbeddedComponentFactory> = new Map(); private embeddedComponentFactories: Map<string, EmbeddedComponentFactory> = new Map();
private hostElement: HTMLElement; private hostElement: HTMLElement;
@ -67,8 +67,6 @@ export class DocViewerComponent implements DoCheck, OnDestroy {
*/ */
private build(doc: DocumentContents) { private build(doc: DocumentContents) {
const displayedDoc = this.displayedDoc = new DisplayedDoc(doc);
// security: the doc.content is always authored by the documentation team // security: the doc.content is always authored by the documentation team
// and is considered to be safe // and is considered to be safe
this.hostElement.innerHTML = doc.contents || ''; this.hostElement.innerHTML = doc.contents || '';
@ -87,7 +85,7 @@ export class DocViewerComponent implements DoCheck, OnDestroy {
// security: the source of this innerHTML is always authored by the documentation team // security: the source of this innerHTML is always authored by the documentation team
// and is considered to be safe // and is considered to be safe
element[contentPropertyName] = element.innerHTML; element[contentPropertyName] = element.innerHTML;
displayedDoc.addEmbeddedComponent(factory.create(this.injector, [], element)); this.embeddedComponents.push(factory.create(this.injector, [], element));
} }
}); });
} }
@ -109,18 +107,13 @@ export class DocViewerComponent implements DoCheck, OnDestroy {
} }
ngDoCheck() { ngDoCheck() {
// TODO: make sure this isn't called too often on the same doc this.embeddedComponents.forEach(comp => comp.changeDetectorRef.detectChanges());
if (this.displayedDoc) {
this.displayedDoc.detectChanges();
}
} }
ngOnDestroy() { ngOnDestroy() {
// destroy components otherwise there will be memory leaks // destroy these components else there will be memory leaks
if (this.displayedDoc) { this.embeddedComponents.forEach(comp => comp.destroy());
this.displayedDoc.destroy(); this.embeddedComponents.length = 0;
this.displayedDoc = undefined;
}
} }
/** /**
@ -131,24 +124,3 @@ export class DocViewerComponent implements DoCheck, OnDestroy {
return selector.replace(/-(.)/g, (match, $1) => $1.toUpperCase()) + 'Content'; return selector.replace(/-(.)/g, (match, $1) => $1.toUpperCase()) + 'Content';
} }
} }
class DisplayedDoc {
private embeddedComponents: ComponentRef<any>[] = [];
constructor(private doc: DocumentContents) {}
addEmbeddedComponent(component: ComponentRef<any>) {
this.embeddedComponents.push(component);
}
detectChanges() {
this.embeddedComponents.forEach(comp => comp.changeDetectorRef.detectChanges());
}
destroy() {
// destroy components otherwise there will be memory leaks
this.embeddedComponents.forEach(comp => comp.destroy());
this.embeddedComponents.length = 0;
}
}