fix(platform-browser): insert APP_ID in styles, contentAttr and hostAttr (#17745)

PR Close #17745
This commit is contained in:
Peter Johan Salomonsen 2017-06-24 21:09:38 +02:00 committed by Igor Minar
parent 3ea8d651cc
commit 712d60e467
7 changed files with 19 additions and 16 deletions

View File

@ -94,7 +94,7 @@ export class AppModule implements Injector, NgModuleRef<any> {
constructor() { constructor() {
initServicesIfNeeded(); initServicesIfNeeded();
this.sanitizer = new DomSanitizerImpl(document); this.sanitizer = new DomSanitizerImpl(document);
this.renderer2 = new DomRendererFactory2(null, null); this.renderer2 = new DomRendererFactory2(null, null, null);
trustedEmptyColor = this.sanitizer.bypassSecurityTrustStyle(''); trustedEmptyColor = this.sanitizer.bypassSecurityTrustStyle('');
trustedGreyColor = this.sanitizer.bypassSecurityTrustStyle('grey'); trustedGreyColor = this.sanitizer.bypassSecurityTrustStyle('grey');
this.componentFactory = this.componentFactory =

View File

@ -27,7 +27,8 @@ describe('functional test for todo', () => {
const toDoAppComponent = (window as any).toDoAppComponent; const toDoAppComponent = (window as any).toDoAppComponent;
await whenRendered(toDoAppComponent); await whenRendered(toDoAppComponent);
const styleContent = findStyleTextForSelector('.todo-list\\\[_ngcontent-\\\w+\\\]'); const styleContent =
findStyleTextForSelector('.todo-list\\\[_ngcontent-[a-z]+-\\\w+\\\]');
expect(styleContent).toMatch(/font-weight:\s*bold;/); expect(styleContent).toMatch(/font-weight:\s*bold;/);
expect(styleContent).toMatch(/color:\s*#d9d9d9;/); expect(styleContent).toMatch(/color:\s*#d9d9d9;/);
})); }));

View File

@ -348,14 +348,14 @@ describe('encapsulation', () => {
renderComponent(WrapperComponent, {rendererFactory: getRendererFactory2(document)}); renderComponent(WrapperComponent, {rendererFactory: getRendererFactory2(document)});
expect(containerEl.outerHTML) expect(containerEl.outerHTML)
.toMatch( .toMatch(
/<div host=""><encapsulated _nghost-c(\d+)="">foo<leaf _ngcontent-c\1=""><span>bar<\/span><\/leaf><\/encapsulated><\/div>/); /<div host=""><encapsulated _nghost-[a-z]+-c(\d+)="">foo<leaf _ngcontent-[a-z]+-c\1=""><span>bar<\/span><\/leaf><\/encapsulated><\/div>/);
}); });
it('should encapsulate host', () => { it('should encapsulate host', () => {
renderComponent(EncapsulatedComponent, {rendererFactory: getRendererFactory2(document)}); renderComponent(EncapsulatedComponent, {rendererFactory: getRendererFactory2(document)});
expect(containerEl.outerHTML) expect(containerEl.outerHTML)
.toMatch( .toMatch(
/<div host="" _nghost-c(\d+)="">foo<leaf _ngcontent-c\1=""><span>bar<\/span><\/leaf><\/div>/); /<div host="" _nghost-[a-z]+-c(\d+)="">foo<leaf _ngcontent-[a-z]+-c\1=""><span>bar<\/span><\/leaf><\/div>/);
}); });
it('should encapsulate host and children with different attributes', () => { it('should encapsulate host and children with different attributes', () => {
@ -401,7 +401,7 @@ describe('encapsulation', () => {
renderComponent(WrapperComponentWith, {rendererFactory: getRendererFactory2(document)}); renderComponent(WrapperComponentWith, {rendererFactory: getRendererFactory2(document)});
expect(containerEl.outerHTML) expect(containerEl.outerHTML)
.toMatch( .toMatch(
/<div host="" _nghost-c(\d+)=""><leaf _ngcontent-c\1="" _nghost-c(\d+)=""><span _ngcontent-c\2="">bar<\/span><\/leaf><\/div>/); /<div host="" _nghost-[a-z]+-c(\d+)=""><leaf _ngcontent-[a-z]+-c\1="" _nghost-[a-z]+-c(\d+)=""><span _ngcontent-[a-z]+-c\2="">bar<\/span><\/leaf><\/div>/);
}); });
}); });

View File

@ -35,7 +35,7 @@ export function getRendererFactory2(document: any): RendererFactory2 {
const fakeNgZone: NgZone = new NoopNgZone(); const fakeNgZone: NgZone = new NoopNgZone();
const eventManager = new EventManager([new SimpleDomEventsPlugin(document)], fakeNgZone); const eventManager = new EventManager([new SimpleDomEventsPlugin(document)], fakeNgZone);
const rendererFactory = const rendererFactory =
new ɵDomRendererFactory2(eventManager, new ɵDomSharedStylesHost(document)); new ɵDomRendererFactory2(eventManager, new ɵDomSharedStylesHost(document), 'dummyappid');
const origCreateRenderer = rendererFactory.createRenderer; const origCreateRenderer = rendererFactory.createRenderer;
rendererFactory.createRenderer = function() { rendererFactory.createRenderer = function() {
const renderer = origCreateRenderer.apply(this, arguments); const renderer = origCreateRenderer.apply(this, arguments);

View File

@ -1123,7 +1123,7 @@ describe('providers', () => {
fixture.update(); fixture.update();
expect(fixture.html) expect(fixture.html)
.toMatch( .toMatch(
/<host-cmp>foo<\/host-cmp><embedded-cmp _nghost-c(\d+)="">From module injector<\/embedded-cmp>/); /<host-cmp>foo<\/host-cmp><embedded-cmp _nghost-[a-z]+-c(\d+)="">From module injector<\/embedded-cmp>/);
}); });
it('should cross the root view boundary to the parent of the host, thanks to the default root view injector', it('should cross the root view boundary to the parent of the host, thanks to the default root view injector',

View File

@ -80,7 +80,7 @@ export const BROWSER_MODULE_PROVIDERS: StaticProvider[] = [
{ {
provide: DomRendererFactory2, provide: DomRendererFactory2,
useClass: DomRendererFactory2, useClass: DomRendererFactory2,
deps: [EventManager, DomSharedStylesHost] deps: [EventManager, DomSharedStylesHost, APP_ID]
}, },
{provide: RendererFactory2, useExisting: DomRendererFactory2}, {provide: RendererFactory2, useExisting: DomRendererFactory2},
{provide: SharedStylesHost, useExisting: DomSharedStylesHost}, {provide: SharedStylesHost, useExisting: DomSharedStylesHost},

View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license * found in the LICENSE file at https://angular.io/license
*/ */
import {Injectable, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2, ViewEncapsulation} from '@angular/core'; import {APP_ID, Inject, Injectable, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2, ViewEncapsulation} from '@angular/core';
import {EventManager} from './events/event_manager'; import {EventManager} from './events/event_manager';
import {DomSharedStylesHost} from './shared_styles_host'; import {DomSharedStylesHost} from './shared_styles_host';
@ -63,7 +63,9 @@ export class DomRendererFactory2 implements RendererFactory2 {
private rendererByCompId = new Map<string, Renderer2>(); private rendererByCompId = new Map<string, Renderer2>();
private defaultRenderer: Renderer2; private defaultRenderer: Renderer2;
constructor(private eventManager: EventManager, private sharedStylesHost: DomSharedStylesHost) { constructor(
private eventManager: EventManager, private sharedStylesHost: DomSharedStylesHost,
@Inject(APP_ID) private appId: string) {
this.defaultRenderer = new DefaultDomRenderer2(eventManager); this.defaultRenderer = new DefaultDomRenderer2(eventManager);
} }
@ -75,8 +77,8 @@ export class DomRendererFactory2 implements RendererFactory2 {
case ViewEncapsulation.Emulated: { case ViewEncapsulation.Emulated: {
let renderer = this.rendererByCompId.get(type.id); let renderer = this.rendererByCompId.get(type.id);
if (!renderer) { if (!renderer) {
renderer = renderer = new EmulatedEncapsulationDomRenderer2(
new EmulatedEncapsulationDomRenderer2(this.eventManager, this.sharedStylesHost, type); this.eventManager, this.sharedStylesHost, type, this.appId);
this.rendererByCompId.set(type.id, renderer); this.rendererByCompId.set(type.id, renderer);
} }
(<EmulatedEncapsulationDomRenderer2>renderer).applyToHost(element); (<EmulatedEncapsulationDomRenderer2>renderer).applyToHost(element);
@ -243,13 +245,13 @@ class EmulatedEncapsulationDomRenderer2 extends DefaultDomRenderer2 {
constructor( constructor(
eventManager: EventManager, sharedStylesHost: DomSharedStylesHost, eventManager: EventManager, sharedStylesHost: DomSharedStylesHost,
private component: RendererType2) { private component: RendererType2, appId: string) {
super(eventManager); super(eventManager);
const styles = flattenStyles(component.id, component.styles, []); const styles = flattenStyles(appId + '-' + component.id, component.styles, []);
sharedStylesHost.addStyles(styles); sharedStylesHost.addStyles(styles);
this.contentAttr = shimContentAttribute(component.id); this.contentAttr = shimContentAttribute(appId + '-' + component.id);
this.hostAttr = shimHostAttribute(component.id); this.hostAttr = shimHostAttribute(appId + '-' + component.id);
} }
applyToHost(element: any) { super.setAttribute(element, this.hostAttr, ''); } applyToHost(element: any) { super.setAttribute(element, this.hostAttr, ''); }