fix(ivy): match directives on namespaced elements (#33555)
Prior to this change, namespaced elements such as SVG elements would not participate correctly in directive matching as their namespace was not ignored, which was the case with the View Engine compiler. This led to incorrect behavior at runtime and template type checking. This commit resolved the issue by ignoring the namespace of elements and attributes like they were in View Engine. Fixes #32061 PR Close #33555
This commit is contained in:
@ -7,7 +7,7 @@
|
||||
*/
|
||||
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {Component, Directive, EventEmitter, Output, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
|
||||
import {Component, Directive, ElementRef, EventEmitter, Output, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
|
||||
import {Input} from '@angular/core/src/metadata';
|
||||
import {TestBed} from '@angular/core/testing';
|
||||
import {By} from '@angular/platform-browser';
|
||||
@ -260,6 +260,52 @@ describe('directives', () => {
|
||||
expect(calls).toEqual(['MyDir.ngOnInit']);
|
||||
});
|
||||
|
||||
it('should match directives on elements with namespace', () => {
|
||||
const calls: string[] = [];
|
||||
|
||||
@Directive({selector: 'svg[dir]'})
|
||||
class MyDir {
|
||||
constructor(private el: ElementRef) {}
|
||||
ngOnInit() { calls.push(`MyDir.ngOnInit: ${this.el.nativeElement.tagName}`); }
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: `my-comp`,
|
||||
template: `<svg dir><text dir></text></svg>`,
|
||||
})
|
||||
class MyComp {
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [MyDir, MyComp]});
|
||||
const fixture = TestBed.createComponent(MyComp);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(calls).toEqual(['MyDir.ngOnInit: svg']);
|
||||
});
|
||||
|
||||
it('should match directives on descendant elements with namespace', () => {
|
||||
const calls: string[] = [];
|
||||
|
||||
@Directive({selector: 'text[dir]'})
|
||||
class MyDir {
|
||||
constructor(private el: ElementRef) {}
|
||||
ngOnInit() { calls.push(`MyDir.ngOnInit: ${this.el.nativeElement.tagName}`); }
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: `my-comp`,
|
||||
template: `<svg dir><text dir></text></svg>`,
|
||||
})
|
||||
class MyComp {
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [MyDir, MyComp]});
|
||||
const fixture = TestBed.createComponent(MyComp);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(calls).toEqual(['MyDir.ngOnInit: text']);
|
||||
});
|
||||
|
||||
it('should match directives when the node has "class", "style" and a binding', () => {
|
||||
const logs: string[] = [];
|
||||
|
||||
|
Reference in New Issue
Block a user