如何在 Ionic 4 页面中导入自定义组件？

Question

我在 Ionic 4 中有一个页面 (IntroPage)，它使用自定义组件 (intro-task)。

Angular 抱怨介绍任务：

Can't bind to 'active' since it isn't a known property of 'intro-task'.
1. If 'intro-task' is an Angular component and it has 'active' input, then verify that it is part of this module.
2. If 'intro-task' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<div id="intro">

尽管我将其添加到 intro.page.module。我想避免将其添加到 app.module.ts.

页面是：

intro.page.html
---------------
<intro-task number=1 [active]="task1Active" (click)="gotoTask1()">
  task 1
</intro-task>

<intro-task number=2 [active]="task2Active" (click)="gotoTask2()">
  task 2
</intro-task>


<intro-task number=3 [active]="task3Active" (click)="gotoTask3()">
  task 3
</intro-task>

以下尝试似乎不起作用：

一个。将 IntroTaskComponent 导入 intro.module.ts。我什至添加了一个entryComponents 属性，但无济于事

intro.module.ts
--------------
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';

import { IntroPage } from './intro.page';
import { IntroTaskComponent} from '../intro-task/intro-task.component'

const routes: Routes = [
  {
    path: '',
    component: IntroPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [
    IntroPage, 
    IntroTaskComponent

  ],
  entryComponents:[
    IntroTaskComponent
  ],
  exports:[
    IntroPage,

  ]
})
export class IntroPageModule {}

乙。创建一个 intro-task.component.module 并导入那个

intro-task.component.module.ts
------------------------------

import { NgModule } from '@angular/core';
import { IntroTaskComponent } from './intro-task.component';
import {IonicModule} from '@ionic/angular';
import { CommonModule } from '@angular/common';


@NgModule({
  declarations: [
    IntroTaskComponent,


  ],
  imports: [
    CommonModule,
    IonicModule,
  ],

  exports:[

    IntroTaskComponent
  ]

})
export class IntroTaskComponentModule {}



intro.module.ts
---------------

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';

import { IntroPage } from './intro.page';
import { IntroTaskComponentModule} from '../intro-task/intro-task.component.module'

const routes: Routes = [
  {
    path: '',
    component: IntroPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    IonicModule,
    IntroTaskComponentModule,
    RouterModule.forChild(routes)
  ],
  declarations: [
    IntroPage, 


  ],

  exports:[
    IntroPage,

  ]
})
export class IntroPageModule {}

我做错了什么？如何以延迟加载的方式正确导入 IntroTaskComponent？

Answer 1

很可能您的选择器 'intro-task' 在 IntroTaskComponent 组件内部有所不同。

如何在 Ionic 4 页面中导入自定义组件？

How to import a custom component in an Ionic 4 page?

ionic-framework

angular

ionic4