离子2 /角2 =>在角度2组件内使用离子2 html标签

时间:2016-03-11 10:33:07

标签: tags angular components ionic2

我想将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: [`

     `],
})

2 个答案:

答案 0 :(得分:2)

我不知道Ionic,但这适用于Polymer元素,也可能适用于此处 - 添加ngDefaultControl

<ion-textarea [(ngModel)]="answerText" ngDefaultControl></ion-textarea>

否则您可能需要实施ControlValueAccessor中提到的自定义https://github.com/angular/angular/issues/6639#issuecomment-174703547

另见ngModel: No value accessor for ''

答案 1 :(得分:0)

您确定AnswerComponent类中存在属性app/cache/prod吗?