Ionic 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.

这应该通过在components.module.ts 中添加IonicModule 和CommonModule 来解决一百个帖子和问题：

@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.

我最初虽然必须将组件模块添加到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

只需将ComponentsModule 导入app.module.ts

...
import { ComponentsModule } from '../components/components.module';
...

@NgModule({
  declarations: [
    MyApp,
    ...
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    ComponentsModule
    ...
  ],
  ...

Answer 2

您必须在 pages/somepage 中创建一个名为“somepage.module.ts”的新文件 像下面的文件。

import { NgModule } from '@angular/core';
import { ComponentsModule } from '../../components/components.module';

@NgModule({
declarations: [
],
imports: [
    ComponentsModule
],
})
export class SomePageModule {}`

Answer 3

请考虑这一点（在 Ionic 3 中）。只需将您的组件（在我的情况下为“EditComponent”）放入您的页面模块中。

@NgModule({
  declarations: [
    EstabProfilePage,
    EditComponent
  ],

一切都会好起来的。

Answer 4

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

问题一：如何让组件被应用识别：

1. 删除components.module.ts。下次生成组件时，使用阻止 ionic 再次创建此文件的标志：

   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 5

您只需删除 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;

就是这样！您的组件有效。 希望对您有所帮助。