我想将Ionic2页面拆分为更小的组件。另外我创建了Angular2组件,我在Ionic2页面中插入了它。见代码。 如果我现在在Angular2 Componentes中使用Ionic2 HTML标签,我会得到
我的没有''“
的值访问器
<ion-textarea>
代码存在错误。
离子页面
@Page({
selector: 'game',
directives: [QuestionComponent, AnswerComponent],
templateUrl: 'build/pages/quiz/quiz.page.html',
styles: [`
`],
)}
...
离子网页HTML:
<ion-navbar *navbar>
<ion-title>Game: {{game.id}} -> Round {{round}}</ion-title>
<!-- Question Card -->
<question></question>
<!-- Answer Card -->
<answer></answer>
Angular2组件:
import {Component} from 'angular2/core'
import {Answer} from "../../../models/answer";
import {AnswerService} from "../../../services/answer.service";
@Component({
selector: 'answer',
providers: [AnswerService],
templateUrl: 'build/pages/quiz/answer/answer.page.html',
styles: [`
`],
})
...
Angular Component HTML:
<ion-card>
<ion-card-content>
<ion-item>
<ion-label floating>Answer</ion-label>
<ion-textarea [(ngModel)]="answerText">></ion-textarea>
<button outline item-right (click)="submitAnswer(answerText)">
Send
<ion-icon name="send"></ion-icon>
</button>
</ion-item>
</ion-card-content>
</ion-card>
是否可以在Angular2组件中使用Ionic2标签组件? 或者将Ionic 2页面划分为小组件的最佳方法是什么?
*编辑
解决方案
我找到了解决问题的解决方案。 链接到解决方案=&gt; Using ion-input inside custom component
要解决这个问题,你必须在Angular2 Komponetne中插入Ionic 2指令。
修复角色组件:
import {Component} from 'angular2/core'
import {IONIC_DIRECTIVES} from 'ionic-angular';
import {Answer} from "../../../models/answer";
import {AnswerService} from "../../../services/answer.service";
@Component({
selector: 'answer',
directives: [IONIC_DIRECTIVES],
providers: [AnswerService],
templateUrl: 'build/pages/quiz/answer/answer.page.html',
styles: [`
`],
})
答案 0 :(得分:2)
我不知道Ionic,但这适用于Polymer元素,也可能适用于此处 - 添加ngDefaultControl
:
<ion-textarea [(ngModel)]="answerText" ngDefaultControl></ion-textarea>
否则您可能需要实施ControlValueAccessor中提到的自定义https://github.com/angular/angular/issues/6639#issuecomment-174703547
答案 1 :(得分:0)
您确定AnswerComponent类中存在属性app/cache/prod
吗?