Question

当我在Ionic的视图中使用组件用户时，收到此消息：

Error: Template parse errors:
'user' is not a known element:
1. If 'user' is an Angular component, then verify that it is part of 
this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the 
'@NgModule.schemas' of this component. ("
    <h4>Puntos: {{data[0].points}}</h4>
  </ion-item>
  [ERROR ->]<user></user>

"): ng:///ProfileDetailsPageModule/ProfileDetailsPage.html@10:6
at syntaxError (http://localhost:8100/build/vendor.js:86908:34)
at TemplateParser.parse (http://localhost:8100/build/vendor.js:111096:19)
at JitCompiler._parseTemplate (http://localhost:8100/build/vendor.js:121051:37)
at JitCompiler._compileTemplate (http://localhost:8100/build/vendor.js:121026:23)
at http://localhost:8100/build/vendor.js:120927:62
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (http://localhost:8100/build/vendor.js:120927:19)
at http://localhost:8100/build/vendor.js:120797:19
at Object.then (http://localhost:8100/build/vendor.js:86897:77)
at JitCompiler._compileModuleAndComponents (http://localhost:8100/build/vendor.js:120796:26)

我的user.ts：

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

@Component({
  selector: 'user',
  templateUrl: 'user.html'
})
export class UserComponent {

  text: string;

  constructor() {
    console.log('Hello UserComponent Component');
    this.text = 'Hello World';
  }

}

这是我的app.module.ts

import { UserComponent } from '../components/user/user';

@NgModule({
  declarations: [
    MyApp,
    UserComponent,
  ],
  .
  .

在我的profile-details.html中，我使用像这样的组件：

<user></user>

我的结构代码：

组件：用户-> user.html，user.scss，user.ts

我删除了components.module.ts，因为在stackoverflow中建议这样做。我不知道我的问题是什么。

Answer 1

在ionic中，当我们创建页面/组件时，默认情况下有一个很好的延迟加载概念。

因此无需在声明数组中导入组件。

不要删除components.module.ts。

像这样更新app.module.ts

import { UserModule } from "../../user/user.module";

    @NgModule({
      declarations: [
        MyApp,
        //UserComponent,
      ],
     imports: [
        UserModule
      ],
    })

Answer 2

在components（src / components）目录中创建components.module.ts文件。
declare和export是components.module.ts文件中的组成部分。就您而言，UserComponent
import ComponentsModule改成AppModule

components.module.ts

@NgModule({
    declarations: [UserComponent],
    imports: [],
    exports: [UserComponent]
})
export class ComponentsModule {}

app.module.ts

@NgModule({
  declarations: [],
  imports: [ComponentsModule],
  bootstrap: [],
  entryComponents: [],
  providers: []
})
export class AppModule {}

希望这会对您有所帮助。

在Ionic 3中创建组件时出现问题

2 个答案: