javascript - 无法让 ionic v4 CLI 生成的组件工作
问题描述
我目前正在使用最新的 Ionic,并且很难让 CLI 生成组件正常工作。
我从一个空白项目开始,然后创建一个新组件:
ionic generate component my-component
该命令运行良好并创建以下文件:
CREATE src/app/my-component/my-component.component.html (31 bytes)
CREATE src/app/my-component/my-component.component.spec.ts (664 bytes)
CREATE src/app/my-component/my-component.component.ts (293 bytes)
CREATE src/app/my-component/my-component.component.scss (0 bytes)
然后我继续在我的主页中使用新组件,如下所示:
<ion-content padding>
<my-component></my-component>
</ion-content>
app.module.ts 文件更新如下:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, RouteReuseStrategy, Routes } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { MyComponentComponent } from './my-component/my-component.component';
@NgModule({
declarations: [AppComponent, MyComponentComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
在 ionic lab 中运行应用程序时,出现以下错误:
错误错误:未捕获(承诺中):错误:模板解析错误:'my-component'不是已知元素
这是我的系统信息:
ionic (Ionic CLI) : 4.2.1
Ionic Framework : @ionic/angular 4.0.0-beta.12
@angular-devkit/build-angular : 0.7.5
@angular-devkit/schematics : 0.7.5
@angular/cli : 6.1.5
@ionic/angular-toolkit : 1.0.0
任何想法为什么会发生这种情况?我以前使用过 Ionic 3,但从来没有遇到过这个问题。
更新:
这是我的默认 my-component.component.ts 文件:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.scss']
})
export class MyComponentComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
解决方案
为了在另一个组件中使用自定义组件,您必须将其包含在exports
数组中。
@NgModule({
....
declarations: [AppComponent, MyComponentComponent],
entryComponents: [],
exports:[MyComponentComponent]
....
})
export class AppModule {}
您可以这样做,也可以将所有自定义组件放在另一个组件customModule
中,然后在app.component.ts
页面中导入该模块。
您指的是组件的名称是错误的。MyComponentComponent
您的班级的选择器是app-my-component
,因此您必须使用<app-my-component></app-my-component>
而不是<my-component></my-component>
.
推荐阅读
- html - 如何在没有边距的 HTML 表格中的两个文本块之间放置一条线?
- flutter - Flutter web - ReordorableListView,在字段之间悬停时带有+按钮
- html - 媒体查询不起作用。我究竟做错了什么?
- python - pip 命令未找到,安装 django 时在 mac 上未找到 virtualenv 命令
- laravel - 如何在由 Laravel api 提供支持的移动应用程序中处理异地支付
- tomcat - javax.servlet.ServletException:类 [org.glassfish.jersey.servlet.ServletContainer] 不是 Servlet
- java - 如何在硒中并行运行多个类
- javascript - 如何在画布上的多点模式下使用单独的颜色为 D3-Geo 路径点着色
- javascript - 将“require”与 esm 一起使用 - ReferenceError:require 未定义
- java - 使 Hamcrest 匹配 Map 中的键或值