离子框架下与NGM模型的结合

Question

我有一个困难在绑定ngModel到离子段，同时建立一个离子应用程序。下面是我收到的错误标题：

无法绑定到“ngModel”，因为它不是“离子段”的已知属性

我打算将共享模块用于两个模块。我使用标准HTML标记创建了另外一个共享模块，它可以根据需要工作。但这一次似乎造成了错误。

我尝试了许多其他用户提出的解决类似问题的方案，但似乎没有一个能解决问题。以下是我正在使用的共享模块：

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { CommonModule } from '@angular/common';
import { SomeClass } from './some-class';

@NgModule({
    imports : [
        CommonModule,
        IonicPageModule.forChild(SomeClass),
    ],
    declarations : [SomeClass],
    exports : [SomeClass]
})

export class SharedModule{

}

相同的HTML文件为：

 <ion-segment [(ngModel)]="XXX" (click)="someMethod()">
   <ion-segment-button value="A"> A </ion-segment-button> 
   <ion-segment-button value="B"> B </ion-segment-button> 
   <ion-segment-button value="C"> C </ion-segment-button> 
 </ion-segment> 

注意：这只是HTML文件的一部分，将包含在整个其他页面中。

组件文件：

import { Component } from '@angular/core';
import { NavController, IonicPage } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'some-class',
  templateUrl: 'some-class.html'
})
export class SomeClass {

  XXX: String;

  constructor(public navCtrl: NavController) { }   

}

你知道我哪里出错了吗？我该怎么解决这个问题？

注意：我尝试过导入FormsMoules和ReactiveFormsMoules，也尝试过导出引用，但没有任何帮助。

Answer 1

ngModel指令来自FormsModule。

错误是无法找到指令（“未知”），它几乎总是缺少引用的指示器。在本例中，是FormsModule，它具有将ngModel指令绑定到任何HTML元素所需的库。

Angular 4与功能模块（例如，如果您使用的是共享模块）结合使用时，还需要导出ReactiveFormsModule才能工作。

我认为模块的代码应该是：

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; //CHANGE(ADD)
import { SomeClass } from './some-class';

@NgModule({
    imports : [
        CommonModule,
        FormsModule, ReactiveFormsModule, //CHANGE (ADD)
        IonicPageModule.forChild(SomeClass),
    ],
    declarations : [SomeClass],
    exports : [SomeClass, FormsModule, ReactiveFormsModule]
})

export class SharedModule{

}