Angular 17 中的自定义元素

Question

自从我将 Angular 更新到版本 17 以来，我无法创建 Web 组件。 我以前是在 app.module 中执行的，现在它们在哪里创建？ 我按照指南所述在 app.component 中尝试过，但它似乎不起作用。 有人可以帮我吗？？

我按照指南在 app.component 中尝试过，但它似乎不起作用..

@Component({
  standalone: true,
  selector: 'app-root',
  template: `
    <input #input value="Message" />
    <button type="button" (click)="popup.showAsElement(input.value)">Show as element</button>
  `,
  providers: [PopupService],
  imports: [PopupComponent],
})
export class AppComponent {
  constructor(
    injector: Injector,
    public popup: PopupService,
  ) {
    // Convert `PopupComponent` to a custom element.
    const PopupElement = createCustomElement(PopupComponent, {injector});
    // Register the custom element with the browser.
    customElements.define('popup-element', PopupElement);
  }
}

Answer 1

查看创建自定义元素的方法

在你的 main.ts 中

//remove
// bootstrapApplication(AppComponent, {providers:[...]})
//   .catch((err) => console.error(err));

//and replace with:
(async () => {
  const app = createApplication({providers:[...]});
  const PopupElement = createCustomElement(AppComponent, {
    injector: (await app).injector
  });

  customElements.define('popup-element', PopupElement);

})();