我正在尝试在ionic2中进行测试。
我的一个页面有自定义标签作为peg的更改日志,我试图更新我的自定义标签和页面按照第7点解释
我已经移动了我的componentTags。ts文件到src,看看我的导入并添加每个自定义组件和管道到src/app/app.module.ts中的declarations数组中。
@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文件
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
});
}
}
我有一个叫购物车的页面。这是因为我需要这个自定义标签,但我得到的错误如下
异常:./HomePage类首页-内联模板:18:27中出现错误,原因是:没有找到ShopingcartPage的组件工厂
ORIGINAL EXCEPTION: No component factory found for ShopingcartPage
尝试在@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 {}
https://github.com/angular/angular/issues/11030