typescript Ionic 3：如何添加组件

Ionic 3: How to add a component

提问by Mister Smith

When I do:

当我做：

ionic generate component my-component

That created this folder structure:

创建了这个文件夹结构：

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

    components.module.ts

I want to use this component in a page. I'm not planning to use the new lazy-loading mechanism in Ionic 3 but I wont mind to. Whatever works the easiest, I just want to use the component! By the way, my page does not have a module for itself, this is the folder structure for the page:

我想在页面中使用这个组件。我不打算在 Ionic 3 中使用新的延迟加载机制，但我不介意。无论哪种最简单，我只想使用该组件！顺便说一句，我的页面本身没有模块，这是页面的文件夹结构：

pages
    somepage
        somepage.ts
        somepage.scss
        somepage.html

Now back to the component: I use custom ionic components (ion-grid) in the template. So my-component.htmllooks like this:

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

<ion-grid></ion-grid>

That line is highlighted in red in VS Code. The error reads as follows:

该行在 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.

This should be solved according to a hundred posts and questions by adding IonicModuleand CommonModuleinto the components.module.ts:

这应该根据一百个帖子和问题通过添加IonicModule和CommonModule进入components.module.ts：

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

But of course this does not solve the error.

但是当然这并不能解决错误。

The second problem is that the page does not recognize the new custom element. This line in somepage.html:

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

<my-component></my-component>

is highlighted in red as well and shows this error:

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

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

I initially though I had to add the Components module to the app.module.ts:

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

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

But this solved nothing. After reading a ton of posts for 2 hours I realized the dreaded components.module.tsis meant for lazy loading and I would have to add a module for the page, so I gave up and tried adding the component directly to the app.module.ts:

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

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

I've tried other combinations as well and nothing worked. For gods sake, this is the easiest thing to do in Angular, and it was easy as well in Ionic 2. What on Earth do you need to do to use a component in Angular 3?

我也尝试过其他组合，但没有任何效果。看在上帝的份上，这是在 Angular 中最容易做的事情，在 Ionic 2 中也很容易。你到底需要做什么才能在 Angular 3 中使用组件？

回答by Mister Smith

I finally solved both problems.

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

Problem #1: How to make the component recognisable by the app:

问题#1：如何让组件可以被应用识别：

1. Delete the components.module.ts. The next time you generate a component, use the flag that prevents ionic from creating this file again:

   ionic generate component mycomponent --no-module

2. Add the component manually into the app.module.ts, only inside declarations:

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

3. Now you can use it inside any page template.

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. 现在您可以在任何页面模板中使用它。

---

---

Problem #2: How to use Ionic components inside the component template:

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

You don't need to do anything special. Just use them. I was getting some errors from before adding the component to the app.module.ts, and Visual Studio Code wasn't removing the errors from the Problems tab. But the app worked. I just restarted VS Code and the errors no longer appear. Apparently this is a known issue with VS Code, that you need to restart it to get rid of old errors.

你不需要做任何特别的事情。只需使用它们。在将组件添加到app.module.ts. 但该应用程序有效。我刚刚重新启动了 VS Code，错误不再出现。显然，这是 VS Code 的一个已知问题，您需要重新启动它以消除旧错误。

回答by Mustafa Lokhandwala

You have to just delete the component.module.tsfile and import your component into app.module.tsjust like this

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

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


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

and in your page where you want to use this component, add @ViewChildlike this

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

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

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

Thats it! Your Component works. Hopefully it helps you.

而已！您的组件有效。希望对你有帮助。

回答by Willian De Castro

Please consider this (in Ionic 3). Just put your component, in my case 'EditComponent', in your page module.

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

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

and all will work fine.

一切都会好起来的。

回答by hesam rajaei

You must create a new file inside pages/somepage, called 'somepage.module.ts' like the file below.

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

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

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

回答by moazzem

Just import ComponentsModulein app.module.ts

刚进口ComponentsModule的app.module.ts

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

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