离子3:如何添加组件

Question

当我做:

ionic generate component my-component

这创建了这个文件夹结构:

components
    my-component
        my-component.ts
        my-component.scss
        my-component.html

    components.module.ts

我想在页面中使用此组件.我不打算在Ionic 3中使用新的延迟加载机制,但我不介意.无论什么工作最简单,我只想使用该组件!顺便说一句,我的页面没有自己的模块,这是页面的文件夹结构:

pages
    somepage
        somepage.ts
        somepage.scss
        somepage.html

现在回到组件:我在模板中使用自定义离子组件(离子网格).所以my-component.html看起来像这样:

<ion-grid></ion-grid>

该代码在VS Code中以红色突出显示.错误如下:

'ion-grid' is not a known element:
1. If 'ion-grid' is an Angular component, then verify that it is part of this module.
2. If 'ion-grid' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

这应该根据一百个帖子和问题通过添加IonicModule和CommonModule解决components.module.ts:

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

但当然这并不能解决错误.

第二个问题是页面无法识别新的自定义元素.这一行somepage.html:

<my-component></my-component>

也以红色突出显示并显示此错误:

'my-component' is not a known element:
1. If 'my-component' is an Angular component, then verify that it is part of this module.
2. If 'my-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

我最初虽然必须将Components模块添加到app.module.ts:

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

但这没有解决.在阅读了大量的帖子2小时后,我意识到可怕的components.module.ts是用于延迟加载,我必须为页面添加一个模块,所以我放弃并尝试将组件直接添加到app.module.ts:

@NgModule({
  declarations: [
    MyApp,
    SomePage,
    MyComponent
  ],
  imports: [
    ...
    MyComponent
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    SomePage
  ],
  providers: [...]
})
export class AppModule {}   

我也尝试过其他组合,没有任何效果.为了上帝的缘故,这是在Angular中最容易做的事情,在Ionic 2中也很容易.在Angular 3中使用组件需要做什么？

Answer 1

我终于解决了这两个问题.

问题#1:如何使应用程序识别组件:

1. 删除components.module.ts.下次生成组件时,请使用阻止离子再次创建此文件的标志:

   ionic generate component mycomponent --no-module

2. 手动将组件添加到app.module.ts内部declarations:

   @NgModule({
       declarations: [
           MyApp,
           SomePage,
           MyComponent
       ],
       ...
   })
   export class AppModule {}   
   

3. 现在您可以在任何页面模板中使用它.

问题2:如何在组件模板中使用Ionic组件:

你不需要做任何特别的事情.只需使用它们.在将组件添加到组件之前,我收到了一些错误app.module.ts,并且Visual Studio Code没有从"问题"选项卡中删除错误.但该应用程序工作.我刚重新启动VS Code,错误不再出现.显然这是VS Code的一个已知问题,您需要重新启动它才能摆脱旧错误.

Answer 2

您只需删除component.module.ts文件并将组件导入到app.module.ts中，就像这样

import { CircularTabs } from "../components/circular-tabs/circular-tabs";


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

在您想要使用此组件的页面中，添加@ViewChild，如下所示

import { CircularTabs } from "../../components/circular-tabs/circular-tabs";

export class MainPage {
@ViewChild("myTabs") myTabs: Tabs;
@ViewChild("myCircularTabs") circularTabs: CircularTabs;

就是这样！您的组件可以工作。希望它对您有帮助。