Question

我想在我的一个页面中导入我的自定义组件，但到目前为止还没有机会。我使用cli生成组件，因此它们位于this post中建议的单个模块（即ComponentsModule）中。

更糟糕的是，我可以看到在VSCode中如果在自定义标记上按住Ctrl按钮，它会在弹出窗口中显示组件的声明。

这是我创建的一个非常基本的测试组件，但仍然没有机会使该组件工作。

mypage.module.ts

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


@NgModule({
  declarations: [
    TaskDetailsPage,
  ],
  imports: [
    IonicPageModule.forChild(DetailsPage),
    ComponentsModule
  ],
})

test.ts

import { Component } from '@angular/core';

/**
 * Generated class for the TestComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'test',
  templateUrl: 'test.html'
})
export class TestComponent {

  text: string;

  constructor() {
    console.log('Hello TestComponent Component');
    this.text = 'Hello World';
  }

}

components.module.ts

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { StarRatingViewerComponent } from './star-rating-viewer/star-rating-viewer';
import { TestComponent } from './test/test';



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

我错过了一些明显的东西吗？我试图退出VSCode并重新启动以及所有这些有趣的尝试，但它还没有按预期工作。

文字

编辑错误

模板解析错误：＆＃39;测试＆＃39;不是一个已知的元素： 1.如果＆＃39;测试＆＃39;是一个Angular组件，然后验证它是否是此模块的一部分。 2.允许任何元素添加＆＃39; NO_ERRORS_SCHEMA＆＃39;到了＆＃39; @ NgModule.schemas＆＃39;这个组件。（＆＃34;
      [ERROR ->]<test></test>
    </div>
  </ion-item> "): ng:///AppModule/DetailsPage.html@60:10

Answer 1

您似乎在同一页面上有两个不同的名称。我指的是你要导入common.module.ts的页面模块

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


@NgModule({
  declarations: [
    TaskDetailsPage,//here
  ],
  imports: [
    IonicPageModule.forChild(DetailsPage),//and here
    ComponentsModule
  ],
})

声明数组中的TaskDetailsPage和IonicPageModule.forChild中的DetailsPage应该是相同的页面名称。

无法在我的页面中加载自定义组件

1 个答案: