angular 去除html标签,javascript - 在Angular结构指令中使用动态组件会产生额外的HTML标签。 如何删除或更换它？ - 堆栈内存溢出...

我的项目中有相当复杂的基础架构，其中包含

主机组件

主机组件模板(MyDir)中使用的结构指令

结构指令(MyComp)中使用的另一个组件

简化的版本如下所示。

主机组件

@Component({

selector: 'my-app',

template: `

{{item.text}}

`

})

export class AppComponent {

data = [ { text: 'item 1' }, { text: 'item 2' } ];

}

结构指令

import { MyComp } from './myComp';

@Directive({ selector: '[myDir][myDirOf]' })

export class MyDir implements OnInit {

private data: any;

constructor(

private templateRef: TemplateRef,

private viewContainer: ViewContainerRef,

private resolver: ComponentFactoryResolver

) {

}

@Input() set myDirOf(data: any) {

this.data = data;

}

ngOnInit() {

const templateView = this.templateRef.createEmbeddedView({});

const compFactory = this.resolver.resolveComponentFactory(MyComp);

const componentRef = this.viewContainer.createComponent(

compFactory, undefined, this.viewContainer.injector, [templateView.rootNodes]

);

componentRef.instance.data = this.data;

componentRef.instance.template = this.templateRef;

}

}

结构指令的组成部分

@Component({

selector: '[my-comp]',

template: `

custom td

[ngTemplateOutlet]="template"

[ngTemplateOutletContext]="{ $implicit: item }"

>

`

})

export class MyComp {

public template: TemplateRef;

public data: any;

}

输出是

定制td

项目1

项目2

除了标记是

custom tditem 1item 2

问题

我想从结果视图中删除中间

或至少将其替换为 。 要查看整个图片，我准备了Stackblitz DEMO ，希望能对您有所帮助...另外，很明显，该示例是人为的，但这就是我尝试用最少的代码重现问题的方法。 因此，问题应该在给定的基础结构中得到解决。

更新

@AlexG发现用tbody替代中间div简单方法，并且stackblitz演示起初显示出良好的效果。 但是，当我尝试将其应用于本地项目时，我遇到了一个新问题：浏览器在表的动态内容准备好呈现之前安排了自己的tbody ，这导致最终视图中出现两个嵌套的tbody ，这似乎与html规范不一致

custom td

item 1

item 2

Stackblitz演示有没有这样的问题，只有tbody my-comp存在。 但是在我本地开发环境中完全相同的项目也可以。 因此，我仍在尝试找到一种方法来删除中间的my-comp容器。

更新2

该演示已根据@markdBC建议的解决方案进行了更新。