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组件内部有所不同。

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

1 个答案: