fix(ivy): properly match directives on ng-template with * syntax (#29251)

PR Close #29251
This commit is contained in:
Pawel Kozlowski 2019-03-12 16:28:19 +01:00 committed by Kara Erickson
parent 3f32c0e674
commit fa8669ac00
2 changed files with 57 additions and 9 deletions

View File

@ -37,18 +37,19 @@ function isCssClassMatching(nodeClassAttrVal: string, cssClassToMatch: string):
* Function that checks whether a given tNode matches tag-based selector and has a valid type.
*
* Matching can be performed in 2 modes: projection mode (when we project nodes) and regular
* directive matching mode. In "projection" mode, we do not need to check types, so if tag name
* matches selector, we declare a match. In "directive matching" mode, we also check whether tNode
* is of expected type:
* - whether tNode has either Element or ElementContainer type
* - or if we want to match "ng-template" tag, we check for Container type
* directive matching mode:
* - in the "directive matching" mode we do _not_ take TContainer's tagName into account if it is
* different from NG_TEMPLATE_SELECTOR (value different from NG_TEMPLATE_SELECTOR indicates that a
* tag name was extracted from * syntax so we would match the same directive twice);
* - in the "projection" mode, we use a tag name potentially extracted from the * syntax processing
* (applicable to TNodeType.Container only).
*/
function hasTagAndTypeMatch(
tNode: TNode, currentSelector: string, isProjectionMode: boolean): boolean {
return currentSelector === tNode.tagName &&
(isProjectionMode ||
(tNode.type === TNodeType.Element || tNode.type === TNodeType.ElementContainer) ||
(tNode.type === TNodeType.Container && currentSelector === NG_TEMPLATE_SELECTOR));
const tagNameToCompare = tNode.type === TNodeType.Container && !isProjectionMode ?
NG_TEMPLATE_SELECTOR :
tNode.tagName;
return currentSelector === tagNameToCompare;
}
/**

View File

@ -0,0 +1,47 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {Component, Directive} from '@angular/core';
import {TestBed} from '@angular/core/testing';
import {By} from '@angular/platform-browser';
describe('directives', () => {
describe('matching', () => {
@Directive({selector: 'ng-template[test]'})
class TestDirective {
}
@Component({selector: 'test-cmpt', template: ''})
class TestComponent {
}
it('should match directives on ng-template', () => {
TestBed.configureTestingModule({declarations: [TestComponent, TestDirective]});
TestBed.overrideTemplate(TestComponent, `<ng-template test></ng-template>`);
const fixture = TestBed.createComponent(TestComponent);
const nodesWithDirective = fixture.debugElement.queryAllNodes(By.directive(TestDirective));
expect(nodesWithDirective.length).toBe(1);
});
it('should match directives on ng-template created by * syntax', () => {
TestBed.configureTestingModule({declarations: [TestComponent, TestDirective]});
TestBed.overrideTemplate(TestComponent, `<div *test></div>`);
const fixture = TestBed.createComponent(TestComponent);
const nodesWithDirective = fixture.debugElement.queryAllNodes(By.directive(TestDirective));
expect(nodesWithDirective.length).toBe(1);
});
});
});