如何在 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>

以下尝试似乎不起作用：

A.将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 {}

B.创建一个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 组件中有所不同。