如何创建组合多个模板的Angular指令

Question

我正在尝试创建一个自定义指令，该指令将允许我从json/ts对象读取模板，并将其插入到我的指令模板中。

例如，在配置文件/database/ts文件中，我有：

{
//...
text: '<p>Many of our tools ...AD Groups:</p><AD_GROUPS id="AD_GROUPS"></AD_GROUPS><p>To request access, ...',
AD_GROUPS: [
'my-team-users'
],
//...
} // truncated and wrapped for readability

我想从配置文件中获取文本(html(，用程序员传入的模板替换<AD_GROUPS>标记，并将其呈现到页面中。指令的使用方式如下：

<div *appAdGroupText="cfg">
<mat-list>
<mat-list-item *ngFor="let group of cfg.AD_GROUPS">{{group}}</mat-list-item>
</mat-list>
</div>

我已经创建了指令：

@Directive({selector: '[appAdGroupText]'})
export class AdGroupTextDirective implements OnChanges {
_config: ConfigurationItemModel | undefined;
constructor(
private templateRef: TemplateRef<unknown>,
private vcr: ViewContainerRef,
private renderer: Renderer2
// private resolver: ComponentFactoryResolver
) {
}
@Input() set appAdGroupText(cfg: ConfigurationItemModel) {
this._config = cfg;
this.render();
}
render() {
const cfg = this._config; // config is set in a set method. This has the correct value
const groupListDivElement: HTMLDivElement = this.renderer.createElement('my-group-text'); // creates a 'parent' element
groupListDivElement.innerHTML = cfg.text; // set the inner html to the config text
const adListDivRef = this.templateRef.createEmbeddedView(null); // create an unattached version of the template
// loop through, and replace the "AD_GROUPS" custom tag with the generated template
groupListDivElement.childNodes.forEach(n => {
if (n.nodeName === 'AD_GROUPS') {
n.replaceWith(adListDivRef.rootNodes[0]); // this is incorrect. I only get the root node, rather than the entire node with its children
}
// arguably, the above could be replaced with an Array.from(...) find / replace
console.log(groupListDivElement); // SEE HTML OUTPUT
// How do I render groupListDivElement in the VCR / renderer???

// this works will put the mat-list ONLYin:
// let view = this.templateRef.createEmbeddedView(null);
// this.vcr.insert(view);
}
}

从console.log:生成HTML

<my-group-text _ngcontent-hwh-c107="">
<p>Many of our tools are restricted to specific groups in Active Directory. In order to access the required tools, you will need access to the following AD Groups:</p>
<div _ngcontent-hwh-c107="">
<mat-list _ngcontent-hwh-c107="" class="mat-list mat-list-base">
<!--container-->
</mat-list>
</div>
<p>
To request access, <a href="https://access" target="_blank" rel="noopener noreferrer">click here</a> and fill out the form with the following information:
<ad_form_table></ad_form_table>
</p>
<p>You will need to create a ticket for each of the above groups listed.</p>
</ad-group-text>

问题

1. 如何将adListDivRef附加到正确的父级？我想我可以这样访问父级：this.renderer.parentNode(this.vcr.element.nativeElement)
2. mat-list似乎找不到我嵌入的*ngFor中的列表项。我该怎么做？我在想，也许我的指令是先调用的，而下一个指令没有调用

Stacklitz，代码最少：https://stackblitz.com/edit/angular-ivy-zv16cn

Answer 1

以下是实现目标的两个步骤：

1. 将生成的ag-group-text元素放入页面

   this.vcr.element.nativeElement.parentNode.appendChild(groupListDivElement);
   

2. 将适当的context传递到动态生成的模板中

   const adListDivRef: EmbeddedViewRef<any> = 
   this.vcr.createEmbeddedView(this.templateRef, { cfg });
   

注意：使用ViewContainerRef.createEmbeddedTemplate(templateRef)确保您不必担心渲染模板，因为更改检测器成为Angular的一部分变化检测树。如果是templateRef.create，您必须自己处理更改检测

分叉堆栈闪电