Angular Element - 身体奇怪地附加在最后

如何解决Angular Element - 身体奇怪地附加在最后

这很奇怪。每当我渲染我的自定义元素时，元素的主体 (innerHTML) 都会附加到末尾。

这是我的主页 - 请参阅“childbody”位于 s-child 元素的正文中：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',template: '<s-child>childbody</s-child>'
})
export class AppComponent {
  title = 'test-app';
}

这是我的 s-child 元素 - 请注意，我不会在任何地方呈现 <ng-content>：

import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'app-child',template: '<p>child works!</p>'
})
export class ChildComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
}

这是我运行此应用程序时的输出 - 请注意，尽管没有“要求在任何地方渲染”（即奇怪的部分），但末尾附加了“childbody”-

这是我的应用程序模块，我在其中声明了自定义元素 - 这只是仅供参考/附加上下文：

import { browserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA,Injector,NgModule,NO_ERRORS_SCHEMA } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ChildComponent } from './test/child/child.component';
import {createCustomElement} from '@angular/elements';

@NgModule({
  declarations: [
    AppComponent,ChildComponent
  ],imports: [
    browserModule,AppRoutingModule
  ],providers: [],bootstrap: [AppComponent],entryComponents: [ChildComponent],schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})
export class AppModule {
  constructor(injector: Injector) {

    const child = createCustomElement(ChildComponent,{injector: injector});
    customElements.define('s-child',child);
  }
}

我想提供一个 Stackblitz，但是自定义元素的行为很奇怪，对此深表歉意。我使用的是 Angular 10.2.4。

解决方法

好吧，经过 6.5 小时的猛烈撞击，我想出了一个解决方案 -

当元素直接在组件中使用时 - 应该使用对应元素的选择器（而不是元素标签）。
当一个元素被动态插入时，可以使用自定义元素的标签，可能与消毒剂一起使用，例如-

  constructor(private sanitizer: DomSanitizer) {
  }

  ngOnInit() {
    this.sanitizedData = this.sanitizer.bypassSecurityTrustHtml('<s-child>adsf</s-child>')
  }