Angular 离子3：如何添加组件

当我这样做时：

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>

这应该通过在

组件中添加
IonicModule
和
CommonModule
来解决。module.ts

：

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

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

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

当然，这并不能解决这个错误

第二个问题是页面无法识别新的自定义元素。

somepage.html

中的此行：

<my-component></my-component>

我最初认为我必须将组件模块添加到

app.module.ts

：

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

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

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

但这并没有解决任何问题。在阅读了大量帖子两个小时后，我意识到可怕的

组件。module.ts

是用于延迟加载的，我必须为页面添加一个模块，因此我放弃了，并尝试将该组件直接添加到

app.module.ts

：

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

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

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

---

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

您只需删除component.module.ts文件，然后像这样将组件导入app.module.ts

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


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

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

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

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

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


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

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

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

就这样！您的组件工作正常。

---

希望它能帮助你。

我终于解决了这两个问题

问题#1：如何让应用程序识别组件：

删除

组件.module.ts

。下次生成组件时，请使用防止ionic再次创建此文件的标志：

离子生成组件mycomponent--无模块

手动将组件添加到

app.module.ts

，仅在

声明中添加：

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

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

---

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

你不需要做任何特别的事情。就用它们吧。在将组件添加到

app.module.ts

之前，我收到了一些错误，Visual Studio代码没有从“问题”选项卡中删除这些错误。但是这个应用程序成功了。我刚刚重新启动VS代码，错误不再出现。显然，这是VS代码的一个已知问题，你需要重新启动它来消除旧错误。

< P>请考虑这一点（在离子3）。只需将您的组件（在我的例子中是“EditComponent”）放在页面模块中

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

一切都会好起来的

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

---

只需在

app.module.ts

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

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

---

你能做一个样品，这样我们就可以直接编辑它了吗？+你能给我们看一下组件吗？ts？延迟加载是强制性的吗？@carton

组件。ts

显示在问题中。除了我添加了IonicModule和CommonModule之外，该文件与生成时完全相同。不起作用。如果不是强制性的，则只需删除

my component.module.ts

文件，然后将组件导入

app.module.ts

文件。它会解决你的问题还要将此行添加到

页面.html

<代码>@ViewChild（“我的组件”）我的组件：MyComponentClassmy-component.ts上面是否有“@IonicPage（）”装饰程序？为什么需要ViewChild？不需要在那里使用ViewChild。那么我们可以在那里使用什么？请引导我将其添加到报关单中，而不是导入解决了问题+1.但不需要ViewChild。现在我遇到的问题是，在组件模板中无法识别离子网格。