我想在ionic2中尝试beta11到rc0。
我的某个页面有自定义标记为peg changelogs我正在尝试更新自定义标记,而且页面按照第7点解释
将每个自定义组件和管道导入并添加到src / app / app.module.ts中的声明数组中。
我已将componentTags.ts文件移至src并查看我的@NgModel
@NgModule({
declarations: [
MyApp,
LoginPage,
HomePage,
AboutUsPage,
PrivacyPolicyPage,
TermsOfUsePage,
ProductSubCategoryPage,
CategoryProductDetailsPage,
CategoryProductDetailsInfoPage,
//custom tags
QuantityComponent
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
LoginPage,
HomePage,
AboutUsPage,
PrivacyPolicyPage,
TermsOfUsePage,
ProductSubCategoryPage,
CategoryProductDetailsPage,
CategoryProductDetailsInfoPage,
QuantityComponent
],
//directives: [QuantityComponent],
providers: [
Products,
Users,
Configurator,
Rest
]
所以这是我的自定义组件文件,名为quantityTag.ts file
import {Component, Input, Output, EventEmitter} from '@angular/core';
@Component({
selector: 'counter',
styles: [`
.quantity-input {
display:flex; align-items:center;
}
.quantity-input .input-width {
width:50px;
border: 1px solid #bdbdbd;
padding-top: 5px;
}
ion-icon{
margin-left:0px;
height:20px;
padding-top: 3px;
margin-top: 5px;
color:#64c8dc;
}
button{
background-color:SteelBlue;
margin-left: 0px;
}
`],
template: `
<span class="quantity-input" style="">
<input type="text" [(ngModel)]="counterValue" class="input-width"/>
<button small (click)="submit($event)"><ion-icon name="refresh"></ion-icon></button>
</span>
`
})
export class QuantityComponent {
@Input() counterValue = 0;
@Input() cookie = null;
@Output() counterChange = new EventEmitter();
submit(evt){
this.counterChange.emit({
value: this.counterValue,
cookie: this.cookie
});
}
}
我有一个名为shopingcart.ts的页面,因为我需要这个自定义标签,但我收到的错误如下所示
EXCEPTION:./ HomePage类中的错误HomePage - 内联模板:18:27导致:找不到ShopingcartPage的组件工厂
原始例外:找不到ShopingcartPage的组件工厂
答案 0 :(得分:17)
尝试在@NgModules中添加您的页面
app.module.ts:
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { LoginPage } from '../pages/loginpage/login-page'
@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
LoginPage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
LoginPage
],
providers: []
})
export class AppModule {}