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.

我最初虽然必须将组件模块添加到app.module.ts：

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

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

app.module.ts

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

Answer 1

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

问题＃1：如何让应用识别组件：

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

ionic generate component mycomponent --no-module

将组件手动添加到app.module.ts，仅在declarations内：

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

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

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

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

Answer 2

您必须删除 component.module.ts 文件并将您的组件导入 app.module.ts ，就像这样

DefaultDirectedGraph<String, DefaultEdge> directedGraph = new DefaultDirectedGraph<Node, DefaultEdge>(
            DefaultEdge.class)
directedGraph.vertexSet();

并在您要使用此组件的页面中，添加 @ViewChild ，就像这样

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


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

多数民众赞成！您的组件有效。希望它可以帮助你。

Answer 3

只需导入blob.toString();中的ComponentsModule

app.module.ts

Answer 4

请考虑一下（在离子3中）。只需将您的组件（在我的情况下为“ EditComponent”）放在页面模块中即可。

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

一切都会很好。

Answer 5

您必须在页面/某页面内创建一个新文件，称为“ somepage.module.ts” 像下面的文件。

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

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

Ionic 3：如何添加组件

5 个答案: