diff --git a/nativescript-angular/renderer.ts b/nativescript-angular/renderer.ts index 4abfc6f97..5dc2316e2 100644 --- a/nativescript-angular/renderer.ts +++ b/nativescript-angular/renderer.ts @@ -4,13 +4,12 @@ import { RendererStyleFlags2, ViewEncapsulation, } from "@angular/core"; -import { isBlank } from "./lang-facade"; import { View } from "ui/core/view"; import { addCss } from "application"; import { topmost } from "ui/frame"; -import { escapeRegexSymbols } from "utils/utils"; import { Device } from "platform"; +import { isBlank } from "./lang-facade"; import { ViewUtil } from "./view-util"; import { APP_ROOT_VIEW, DEVICE, getRootPage } from "./platform-providers"; import { NgView } from "./element-registry"; @@ -21,7 +20,6 @@ const COMPONENT_REGEX = /%COMP%/g; export const COMPONENT_VARIABLE = "%COMP%"; export const HOST_ATTR = `_nghost-${COMPONENT_VARIABLE}`; export const CONTENT_ATTR = `_ngcontent-${COMPONENT_VARIABLE}`; -const ATTR_REPLACER = new RegExp(escapeRegexSymbols(CONTENT_ATTR), "g"); const ATTR_SANITIZER = /-/g; @Injectable() @@ -152,6 +150,7 @@ export class NativeScriptRenderer extends Renderer2 { // Seems to be called on component dispose only (router outlet) // TODO: handle this when we resolve routing and navigation. } + setAttribute(view: NgView, name: string, value: string) { traceLog(`NativeScriptRenderer.setAttribute ${view} : ${name} = ${value}`); return this.setProperty(view, name, value); @@ -229,16 +228,17 @@ class EmulatedRenderer extends NativeScriptRenderer { private hostAttr: string; constructor( - private component: RendererType2, + component: RendererType2, rootView: NgView, zone: NgZone, viewUtil: ViewUtil, ) { super(rootView, zone, viewUtil); - this.addStyles(); - this.contentAttr = shimContentAttribute(component.id); - this.hostAttr = shimHostAttribute(component.id); + const componentId = component.id.replace(ATTR_SANITIZER, "_"); + this.contentAttr = replaceNgAttribute(CONTENT_ATTR, componentId); + this.hostAttr = replaceNgAttribute(HOST_ATTR, componentId); + this.addStyles(component.styles, componentId); } applyToHost(view: NgView) { @@ -246,41 +246,27 @@ class EmulatedRenderer extends NativeScriptRenderer { } appendChild(parent: any, newChild: NgView): void { - // Set an attribute to the view to scope component-specific css. - // The property name is pre-generated by Angular. - const cssAttribute = this.replaceNgAttribute(CONTENT_ATTR); - newChild[cssAttribute] = true; - super.appendChild(parent, newChild); } createElement(parent: any, name: string): NgView { const view = super.createElement(parent, name); + + // Set an attribute to the view to scope component-specific css. + // The property name is pre-generated by Angular. super.setAttribute(view, this.contentAttr, ""); return view; } - private addStyles() { - this.component.styles - .map(s => s.toString()) - .map(s => this.replaceNgAttribute(s)) + private addStyles(styles: (string | any[])[], componentId: string) { + styles.map(s => s.toString()) + .map(s => replaceNgAttribute(s, componentId)) .forEach(addCss); } - private replaceNgAttribute(input: string): string { - return input.replace(ATTR_REPLACER , `_ng_content_${this.componentId}`); - } - - private get componentId(): string { - return this.component.id.replace(ATTR_SANITIZER , "_"); - } -} - -function shimContentAttribute(componentShortId: string): string { - return CONTENT_ATTR.replace(COMPONENT_REGEX, componentShortId); } -function shimHostAttribute(componentShortId: string): string { - return HOST_ATTR.replace(COMPONENT_REGEX, componentShortId); +function replaceNgAttribute(input: string, componentId: string): string { + return input.replace(COMPONENT_REGEX, componentId); }