我有一个名为other的现有页面模块.运行离子g组件测试后,我将自动生成的ComponentsModule导入other.module.ts并将其添加到imports数组中.

import { ComponentsModule } from "../../components/components.module";
@NgModule({
  declarations: [
    OtherPage,],imports: [
    IonicPageModule.forChild(OtherPage),ComponentsModule,})
export class OtherPageModule {}

然后,我将组件选择器添加到页面中< test>< / test>.

这会导致错误：

polyfills.js:3 Unhandled Promise rejection: Template parse errors:
'test' is not a kNown element:
1. If 'test' is an Angular component,then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

<ion-content padding>
[ERROR ->]<test> </test>
</ion-content>
"): ng:///AppModule/OtherPage.html@16:0 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
'test' is not a kNown element:
1. If 'test' is an Angular component,then verify that it is part of this module.

这对我不起作用.我还尝试为测试组件创建一个模块并以相同的方式导入它,但这对我不起作用.

我似乎无法找到任何文档或示例.如何在Ionic 3中导入自定义组件？

import { ComponentsModule } from "../../components/components.module";
@NgModule({
  declarations: [
    OtherPage,entryComponents: [
    ComponentsModule
  ]
})
export class OtherPageModule {}

Error: Error: Cannot resolve all parameters for ‘ErrorHandler'(?).
Make sure that all the parameters are decorated with Inject or have
valid type annotations and that ‘ErrorHandler’ is decorated with
Injectable.

我确实试过装饰私有路由器：使用@Inject的路由器无济于事.我正在使用打字稿,因此我认为我不需要@Inject属性.

我的自定义ExceptionHandler看起来像这样

import { ExceptionHandler } from '@angular/core';
import { Router } from '@angular/router';

export class ErrorHandler extends ExceptionHandler{

    constructor(
        private router: Router 
    ){
        super(null,null);

    }

    call(error,stackTrace = null,reason = null) {
        console.log(error);
        this.router.navigate(['/error']);
    }
}

我的主要看起来像这样

import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

import { provide,ExceptionHandler } from '@angular/core';
import { ErrorHandler } from './error-handler/error-handler';

import { HTTP_PROVIDERS } from '@angular/http';
import { ROUTER_PROVIDERS } from '@angular/router';

bootstrap(AppComponent,[
    HTTP_PROVIDERS,ROUTER_PROVIDERS,provide(ExceptionHandler,{useClass: ErrorHandler})
]);

为什么我收到此错误？在ExceptionHandler实例化时,路由器是否可注入？

完整的源代码可在此处获得

https://github.com/harindaka/angular2-seed-typescript/tree/b368315ce6608085f3154a03bc53f0404ce16495

import { ErrorHandler,Injectable } from '@angular/core';

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {

  private myService: MyService;

  constructor(private injector: Injector) {
     this.myService = injector.get(MyService);
  }

  handleError(error) {
    alert('Bad things happening');
  }
  
}

@NgModule({
  providers: [
    {
      provide: ErrorHandler,useClass: GlobalErrorHandler
    }
  ]
})
export class AppModule { }

注意：上面的答案使用ExceptionHandler,它在最终版本中被删除,有利于ErrorHandler.

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

@Component({
  selector: 'deletableItem',template: `
    <ion-checkBox item-right></ion-checkBox>
  `
})
export class DeletableItem {
  constructor() {}
}

并在一些html视图中使用它：

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let bill of bills" (click)="openEdit(bill)">
      <ion-label text-left>{{bill.name}}</ion-label>
      <deletableItem></deletableItem>
    </ion-item>
  </ion-list>
</ion-content>

看起来比仅仅把它放在父的组件视图中更糟糕,如下所示：

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let bill of bills" (click)="openEdit(bill)">
      <ion-label text-left>{{bill.name}}</ion-label>
      <ion-checkBox item-right></ion-checkBox>
    </ion-item>
  </ion-list>
</ion-content>

这一切都是因为将此组件的HTML代码角度包装成html标签.所以我们失去了离子成分的强度(准备好了css).请不要建议属性组件分配如下：

<ion-checkBox item-right deletableItem></ion-checkBox>

因为这只是一个简单的例子.

在不丢失准备好的CSS的情况下,用离子组件编写自定义组件的最佳方法是什么？

查看源文件夹here以获取< ion-checkBox>.

为deleteableItem定义自己的SASS.

此外,on the Ionic website you can find the various SASS component/platform variables.

我还提供了一个详细的相关解释,关于Ionic CSS classes assignment也可能对你有所帮助.

您还可以使用Chrome检查在Developer工具中查看ion-checkBox的类分配,并将它们与Ionic网站上的列表进行比较.