fix(platform-browser): insert APP_ID in styles, contentAttr and hostAttr (#17745)
PR Close #17745
This commit is contained in:
parent
3ea8d651cc
commit
712d60e467
|
@ -94,7 +94,7 @@ export class AppModule implements Injector, NgModuleRef<any> {
|
|||
constructor() {
|
||||
initServicesIfNeeded();
|
||||
this.sanitizer = new DomSanitizerImpl(document);
|
||||
this.renderer2 = new DomRendererFactory2(null, null);
|
||||
this.renderer2 = new DomRendererFactory2(null, null, null);
|
||||
trustedEmptyColor = this.sanitizer.bypassSecurityTrustStyle('');
|
||||
trustedGreyColor = this.sanitizer.bypassSecurityTrustStyle('grey');
|
||||
this.componentFactory =
|
||||
|
|
|
@ -27,7 +27,8 @@ describe('functional test for todo', () => {
|
|||
const toDoAppComponent = (window as any).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(/color:\s*#d9d9d9;/);
|
||||
}));
|
||||
|
|
|
@ -348,14 +348,14 @@ describe('encapsulation', () => {
|
|||
renderComponent(WrapperComponent, {rendererFactory: getRendererFactory2(document)});
|
||||
expect(containerEl.outerHTML)
|
||||
.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', () => {
|
||||
renderComponent(EncapsulatedComponent, {rendererFactory: getRendererFactory2(document)});
|
||||
expect(containerEl.outerHTML)
|
||||
.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', () => {
|
||||
|
@ -401,7 +401,7 @@ describe('encapsulation', () => {
|
|||
renderComponent(WrapperComponentWith, {rendererFactory: getRendererFactory2(document)});
|
||||
expect(containerEl.outerHTML)
|
||||
.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>/);
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
@ -35,7 +35,7 @@ export function getRendererFactory2(document: any): RendererFactory2 {
|
|||
const fakeNgZone: NgZone = new NoopNgZone();
|
||||
const eventManager = new EventManager([new SimpleDomEventsPlugin(document)], fakeNgZone);
|
||||
const rendererFactory =
|
||||
new ɵDomRendererFactory2(eventManager, new ɵDomSharedStylesHost(document));
|
||||
new ɵDomRendererFactory2(eventManager, new ɵDomSharedStylesHost(document), 'dummyappid');
|
||||
const origCreateRenderer = rendererFactory.createRenderer;
|
||||
rendererFactory.createRenderer = function() {
|
||||
const renderer = origCreateRenderer.apply(this, arguments);
|
||||
|
|
|
@ -1123,7 +1123,7 @@ describe('providers', () => {
|
|||
fixture.update();
|
||||
expect(fixture.html)
|
||||
.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',
|
||||
|
|
|
@ -80,7 +80,7 @@ export const BROWSER_MODULE_PROVIDERS: StaticProvider[] = [
|
|||
{
|
||||
provide: DomRendererFactory2,
|
||||
useClass: DomRendererFactory2,
|
||||
deps: [EventManager, DomSharedStylesHost]
|
||||
deps: [EventManager, DomSharedStylesHost, APP_ID]
|
||||
},
|
||||
{provide: RendererFactory2, useExisting: DomRendererFactory2},
|
||||
{provide: SharedStylesHost, useExisting: DomSharedStylesHost},
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
* 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 {DomSharedStylesHost} from './shared_styles_host';
|
||||
|
@ -63,7 +63,9 @@ export class DomRendererFactory2 implements RendererFactory2 {
|
|||
private rendererByCompId = new Map<string, 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);
|
||||
}
|
||||
|
||||
|
@ -75,8 +77,8 @@ export class DomRendererFactory2 implements RendererFactory2 {
|
|||
case ViewEncapsulation.Emulated: {
|
||||
let renderer = this.rendererByCompId.get(type.id);
|
||||
if (!renderer) {
|
||||
renderer =
|
||||
new EmulatedEncapsulationDomRenderer2(this.eventManager, this.sharedStylesHost, type);
|
||||
renderer = new EmulatedEncapsulationDomRenderer2(
|
||||
this.eventManager, this.sharedStylesHost, type, this.appId);
|
||||
this.rendererByCompId.set(type.id, renderer);
|
||||
}
|
||||
(<EmulatedEncapsulationDomRenderer2>renderer).applyToHost(element);
|
||||
|
@ -243,13 +245,13 @@ class EmulatedEncapsulationDomRenderer2 extends DefaultDomRenderer2 {
|
|||
|
||||
constructor(
|
||||
eventManager: EventManager, sharedStylesHost: DomSharedStylesHost,
|
||||
private component: RendererType2) {
|
||||
private component: RendererType2, appId: string) {
|
||||
super(eventManager);
|
||||
const styles = flattenStyles(component.id, component.styles, []);
|
||||
const styles = flattenStyles(appId + '-' + component.id, component.styles, []);
|
||||
sharedStylesHost.addStyles(styles);
|
||||
|
||||
this.contentAttr = shimContentAttribute(component.id);
|
||||
this.hostAttr = shimHostAttribute(component.id);
|
||||
this.contentAttr = shimContentAttribute(appId + '-' + component.id);
|
||||
this.hostAttr = shimHostAttribute(appId + '-' + component.id);
|
||||
}
|
||||
|
||||
applyToHost(element: any) { super.setAttribute(element, this.hostAttr, ''); }
|
||||
|
|
Loading…
Reference in New Issue