使用Angular 6 Web组件

Question

使用Angular 6 Web组件

CSa*_*tos 1 elements angular angular6 angular-elements

我有以下问题.我有一个使用Angular 6和路由系统构建的应用程序.我想创建一个包含此应用程序的Web组件,并能够将其用作不同Web应用程序的一部分.我已按照本教程操作,并根据自己的需要对其进行了修改:https://codingthesmartway.com/angular-elements-a-practical-introduction-to-web-components-with-angular-6/

结果是屏幕上没有任何渲染,现在浏览器中存在错误Error: The selector "app-root" did not match any elements.

在浏览器源文件上,我可以确认包含我的Web组件的js文件已成功加载.

这是我有的:

在app.module.ts中

@NgModule({
  declarations: [
    AppComponent,
    VideoRoomComponent,
    DashboardComponent,
    StreamComponent,
    DialogNicknameComponent,
    ChatComponent,
    DialogExtensionComponent,
  ],
  imports: [
    FormsModule,
    ReactiveFormsModule,
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatCardModule,
    MatToolbarModule,
    MatIconModule,
    MatInputModule,
    MatFormFieldModule,
    MatDialogModule,
    MatTooltipModule,
    AppRoutingModule,
    HttpClientModule,
  ],
  entryComponents: [
    AppComponent,
    DialogNicknameComponent,
    DialogExtensionComponent,
  ],
  providers: [{provide: APP_BASE_HREF, useValue: '/'}, MyService],
  bootstrap: [AppComponent],
})
export class AppModule {
  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const el = createCustomElement(AppComponent, { injector: this.injector });
    customElements.define('myElement', el);
  }
}

Run Code Online (Sandbox Code Playgroud)

在这里,我的index.html来测试自定义元素

   <!DOCTYPE html>
<html>

<head>

  <title>My webpage!</title>
  <script>
    var global = global || window;
  </script>
  <script type="text/javascript" src="myElement.js"></script>
</head>

<body>
  <h1>Hello, World!</h1>
  <myElement></myElement>    
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

有关这个问题的任何建议？

提前致谢

Answer 1

J.P*_*rge 5

尝试使用<my-element>而不是<myElement>.同时调整你的customElements.define电话customElements.define('my-element', el);.如果我没有弄错,要将自定义元素与本机浏览器元素分开,每个自定义元素都必须至少有一个短划线.HTML不区分大小写.

归档时间：	7 年，5 月前
查看次数：	1459 次
最近记录：	6 年，2 月前