Angular Ivy，文本节点如何指向它的ng-template

Question

我需要在测试中发现tpl1的文本节点在其渲染后属于ng-template。

1
<ng-template tpl>
tpl1
</ng-template>
2

如果在tpl1的渲染后找到debugNode，那么它的父节点指向component的节点，但是我想确保tpl1的debugNode来自ng-template.

到目前为止，我是ableclassic模式，但是不能在ivy中找到一种方法.

• 链接到stackblitz经典(作品):https://stackblitz.com/edit/github-5wg14l-b39rck?file=src%2Ftest.spec.ts

下面有一个最小的例子，任何解决方案(不仅与elDef和tNode)将为我工作。

import {Component, DebugNode, Directive, TemplateRef, VERSION, ViewChild, ViewContainerRef} from '@angular/core';
import {TestBed} from "@angular/core/testing";
@Directive({
selector: '[tpl]',
})
class TplDirective {
public constructor(public readonly tpl: TemplateRef<any>) {}
}
@Component({
selector: 'target',
template: `
1
<ng-template tpl>
tpl1
</ng-template>
2
`,
})
class TargetComponent {
@ViewChild(TplDirective, {
read: TemplateRef,
}) public readonly tpl?: TemplateRef<any>;
@ViewChild(TplDirective, {
read: ViewContainerRef,
}) public readonly vcr?: ViewContainerRef;
}
describe('issue-289', () => {
beforeEach(() => TestBed.configureTestingModule({
declarations: [TplDirective, TargetComponent],
}).compileComponents());
fit('finds right parent in ivy', () => {
const fixture = TestBed.createComponent(TargetComponent);
fixture.detectChanges();
const componentEl = fixture.debugElement;
const component: TargetComponent = componentEl.componentInstance;
// check that only defaults have been rendered
expect (componentEl.childNodes.length).toEqual(3);
const [txtEl1, tplEl, txtEl2] = componentEl.childNodes;
expect(txtEl1.nativeNode.nodeName).toEqual('#text');
expect(tplEl.nativeNode.nodeName).toEqual('#comment');
expect(txtEl2.nativeNode.nodeName).toEqual('#text');
// rendering the template
component.vcr.createEmbeddedView(component.tpl);
fixture.detectChanges();
// looking for the new element
expect (componentEl.childNodes.length).toEqual(4);
const txtTplEl = componentEl.childNodes.find(el => el !== txtEl1 && el !== tplEl && el !== txtEl2);
expect(txtTplEl.nativeNode.nodeName).toEqual('#text');
// getting internal node, 1st is classic, 2nd is ivy
const tplElNode = (tplEl.injector as any).elDef || (tplEl.injector as any)._tNode;
expect(tplElNode).toBeDefined();
// FIXME find how txtTplEl points to tplEl
// in classic (not ivy) it works like that
const txtTplNode = (txtTplEl as any)._debugContext?.view?.parentNodeDef;
// should succeed
expect(txtTplNode).toEqual(tplElNode);
});
});

Answer 1

像这样检查怎么样

const view = component.vcr.createEmbeddedView(component.tpl);
/
||
assign to variable
expect(view.rootNodes.includes(txtTplEl.nativeNode)).toBeTruthy();

它不涉及私有API，应该可以在两个版本中工作。

叉形Stackblitz