Angular 元素 - 正文奇怪地附加在末尾

Question

这很奇怪。每当我呈现自定义元素时，元素的主体 (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' 附加在末尾，尽管它不是 'asked to render anywhere'（即奇怪的部分）-

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

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.

Answer 1

好的，经过 6.5 小时的头脑风暴，我想出了一个解决方案 -

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

  constructor(private sanitizer: DomSanitizer) {
  }

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

Angular 元素 - 正文奇怪地附加在末尾

Angular Element - body strangely getting appended at the end

angular

angular-elements