Question

我有一个名为 HostComponent 的组件，当我将此组件作为启动组件时，一切正常，我的应用程序正常工作。

然后我再创建一个名为AppModule的模块，并在app组件中包装主机组件

import { Component, Input } from '@angular/core';
@Component({
  selector: 'main-app',
  template: '<ds-framework-host >Loading...</ds-framework-host>'
})
export class AppComponent {
constructor(){

}
}

AppModule

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ,HostModule 
  ],
  schemas:[],
  bootstrap: [AppComponent],
  entryComponents: [
     SomeOtherEntryComponentsHere
  ]
})
export class AppModule {

}

的index.html

<body>
           <main-app></main-app>
</body>

主机模块（存在主机组件）

@NgModule({
  declarations: [
    HostComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    DashboardModule,
  ],
  schemas:[CUSTOM_ELEMENTS_SCHEMA],
  exports:[]

})
export class HostModule {

 }

当我尝试运行应用程序时，我收到以下错误

为了抑制此错误，我已根据以下参考资料将 CUSTOM_ELEMENTS_SCHEMA 添加到app模块。 CUSTOM_ELEMENTS_SCHEMA added to NgModule.schemas still showing Error

我的错误发生了，但我的<ds-framework-host>显示正在加载..但是这个子组件中没有执行任何操作。在开发人员工具中没有显示错误

Angular Version - 4.0.0.0

如何解决此错误及其原因？

Answer 1

您的app.module中的声明数组中没有ds-framework-host组件。如果ds-framework-host是本机自定义元素，则应该只使用CUSTOM_ELEMENTS_SCHEMA

Answer 2

不幸的是，关于你的“HostComponent”究竟是什么的信息不足。您所要做的就是将HostComponent添加到AppModule中的声明以在AppComponent中使用。

@RequestMapping("/handle")
public ResponseEntity<String> handle() {
    URI location = ...;
    HttpHeaders responseHeaders = new HttpHeaders();
    responseHeaders.setLocation(location);
    responseHeaders.set("MyResponseHeader", "MyValue");
    return new ResponseEntity<String>("Hello World", responseHeaders, HttpStatus.CREATED);
}

Answer 3

我已通过主机模块中的导出 HostComponent 修复了我的问题。因为这个组件是另一个模块，为了在App模块中使用，我们应该导出。

@NgModule({
  declarations: [
    HostComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    DashboardModule,
  ],
  schemas:[CUSTOM_ELEMENTS_SCHEMA],
  exports:[HostComponent]

})
export class HostModule {

 }

将CUSTOM_ELEMENTS_SCHEMA添加到应用程序模块后，子组件未加载

3 个答案: