Question

我正在使用Ionic，并且有一个ion-textarea我希望自动调整大小，即在用户添加更多文本时展开。我找到了ionic2-autosize，这是directive。但是，我似乎无法使此directive对我的ion-textarea产生任何影响，即它不会随着用户添加更多文字而展开。

我跑：

npm install --save ionic2-autosize

的package.json

"ionic2-autosize": "^1.1.1",

app.module.ts

import {Autosize} from 'ionic2-autosize';

@NgModule({
  declarations: [
    MyApp, Autosize
  ],
...

review.ts

<ion-textarea autosize [(ngModel)]="ratingModel.review" formControlName="review" id="review"></ion-textarea>

正如您所看到的，我将autosize属性添加到ion-textarea，但这没有任何效果，它的行为类似于只有2行高度的常规ion-textarea。我希望高度能够动态扩展。

任何帮助表示感谢。

更多信息：

global packages:

    @ionic/cli-utils : 1.1.2
    Cordova CLI      : 6.4.0 
    Ionic CLI        : 3.1.2

local packages:

    @ionic/app-scripts              : 1.3.0
    @ionic/cli-plugin-cordova       : 1.1.2
    @ionic/cli-plugin-ionic-angular : 1.1.2
    Ionic Framework                 : ionic-angular 3.2.1

System:

    Node       : v7.10.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.2 Build version 8E2002 
    ios-deploy : not installed
    ios-sim    : not installed

更新

我将AutosizeModule添加到我的模块中：

review.module.ts

import {AutosizeModule} from 'ionic2-autosize';

@NgModule({
  declarations: [ReviewPage],
  imports: [IonicPageModule.forChild(ReviewPage), ControlMessagesModule, RatingComponentUpdateableModule, AutosizeModule],
  exports: [ReviewPage]
})
export class ReviewPageModule { }

但是得到这个错误：

错误错误：未捕获（在承诺中）：错误：类型自动调整大小是其中的一部分 2个模块的声明：AppModule和AutosizeModule！请考虑将Autosize移动到导入AppModule和的更高模块 AutosizeModule。您还可以创建一个导出和导出的新NgModule 包括Autosize然后导入AppModule中的NgModule和 AutosizeModule。

更新

我从app.module.ts删除了它，似乎修复了上述错误。但是，现在我得到了：

错误错误：未捕获（在承诺中）：错误：BrowserModule已经存在已装载。如果您需要访问常用指令，如NgIf和 NgFor来自延迟加载的模块，而是导入CommonModule。错误： BrowserModule已经加载。如果你需要访问共同点来自延迟加载模块的导入，例如NgIf和NgFor等指令相反，CommonModule。

更新

改为使用CommonModule：

review.module.ts

//import {AutosizeModule} from 'ionic2-autosize';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [ReviewPage],
  imports: [IonicPageModule.forChild(ReviewPage), ControlMessagesModule, RatingComponentUpdateableModule, CommonModule],
  exports: [ReviewPage]
})
export class ReviewPageModule { }

app.module.ts

import { AutosizeModule } from 'ionic2-autosize';
...
@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    BrowserModule,
    AutosizeModule,
    HttpModule,
    AngularFireModule.initializeApp(firebaseConfig),
    IonicStorageModule.forRoot()
  ],

错误消失了，但ion-textarea仍然没有自动调整大小。

Answer 1

我在他的git上创建了一个pull请求，希望他能解决它。您需要做的就是删除BrowserModule。

整个项目的项目需要BrowserModule。如果需要，小的NgModules（ngIf，ngFor，ngClass等）需要CommonModule。

在Ionic3中，只有最顶层的@NgModule才会拥有BrowserModule。

供参考 https://github.com/misha130/ionic2-autosize/commit/3b40925dca104ec76fe55b4af3a726efb7e3efbe

Ionic 3指令不使用ionic2-autosize

1 个答案: