javascript - Ionic 3 指令不适用于 ionic2-autosize

Question

我正在使用 Ionic，并且有一个 ion-textarea我想自动调整大小，即随着用户添加更多文本而扩展。我找到了 ionic2-autosize ，这是一个指令。但是，我似乎无法让这个 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，但这没有任何效果，它的行为就像一个常规的 ion-textarea 只有 2 行的高度。我希望高度能够动态扩展。

感谢任何帮助。

更多信息:

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 { }

但是得到这个错误:

ERROR Error: Uncaught (in promise): Error: Type Autosize is part of the declarations of 2 modules: AppModule and AutosizeModule! Please consider moving Autosize to a higher module that imports AppModule and AutosizeModule. You can also create a new NgModule that exports and includes Autosize then import that NgModule in AppModule and AutosizeModule.

更新

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

ERROR Error: Uncaught (in promise): Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead. Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.

更新

而是使用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 request，希望他能修复它。为此，您需要做的就是删除 BrowserModule。

作为整个项目的项目需要 BrowserModule。如果需要，小型 NgModule(ngIf、ngFor、ngClass 等)需要 CommonModule。

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

供引用 https://github.com/misha130/ionic2-autosize/commit/3b40925dca104ec76fe55b4af3a726efb7e3efbe