无法在升级指令中找到所需的“ ngModel”-在角度9中使用升级的AJS模块

Question

我正在尝试遵循有关升级组件https://angular.io/guide/

的指南

我已经运行了整个AngularJS编写的演示应用程序（代码中的），该应用程序使用ValueEditor库。我想直接在Angular9中使用此库。 现在我有一个问题，我要升级的组件需要ng-model（请参阅文件value-editor.component.ts中）。我不知道如何将ngModel传递给升级的组件。

所以我想要升级价值编辑器模块，并在angular 9中使用它简单的应用程序。我没有找到有关网络上类似问题的任何信息。

它给我错误：

错误错误：在升级的指令“ kpValueEditor”中找不到所需的“ ngModel”

请有人看一下:-) 这是我的使用AJs模块的A9应用程序

app.module.ts

import { FormsModule } from '@angular/forms';
import { UpgradeModule, setAngularJSGlobal } from '@angular/upgrade/static';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, DoBootstrap } from '@angular/core';

import { AppComponent } from './app.component';
import * as angular from 'angular';

import { Directive, ElementRef, Injector } from '@angular/core';
import { UpgradeComponent } from '@angular/upgrade/static';

import valueEditorModule from '@kpsys/angularjs-value-editor';

@Directive({
  selector: 'kp-value-editor'
})
export class KpValueEditorWrapper extends UpgradeComponent {
  constructor(elementRef: ElementRef, injector: Injector) {
    super('kpValueEditor', elementRef, injector);  
  }
}

@NgModule({
  declarations: [
    AppComponent,
    KpValueEditorWrapper
  ],
  imports: [
    FormsModule,
    UpgradeModule,
    BrowserModule,
  ],
  providers: [{provide: '$scope', useExisting: '$rootScope'}],
  entryComponents: [
    AppComponent
  ]
})

export class AppModule implements DoBootstrap { 
  constructor(private upgrade: UpgradeModule) { }

  public ngDoBootstrap(app: any): void {
    setAngularJSGlobal(angular);
    this.upgrade.bootstrap(document.body, [valueEditorModule], { strictDi: false });
    app.bootstrap(AppComponent);
  }
}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'angular-value-editor';
  name : string = 'Honza';
  val: string = ''; 
}

app.component.html

<h1>Value Editor Demo</h1>
<kp-value-editor [(ngModel)]="val" ngDefaultControl type="'text'" >{{val}}</kp-value-editor> 

这是我要升级的AJs模块值编辑器和组件。

value-editor.module.ts

export default register('angularjs-value-editor', [
    'ui.bootstrap',
    aliasesModule,
    acceptableValueEditorModule,
    booleanValueEditorModule,
    dateValueEditorModule,
    hiddenValueEditorModule,
    htmlValueEditorModule,
    numberValueEditorModule,
    textValueEditorModule,
    yearValueEditorModule,
    cardNumberValueEditorModule,
    indexSelectionValueEditorModule,
    autocompleteValueEditorModule,
    passwordValueEditorModule,
    signatureValueEditorModule,
    accessNumberValueEditorModule,
    numberRangeValueEditorModule,
    exemplarBarCodeValueEditorModule,
    acceptableRootValueEditorModule,
    searchTextValueEditorModule,
    searchableValueEditorModule,
    velocityTemplateValueEditorModule
])
    .constant('loadingSpinnerTemplateUrl', LOADING_SPINNER_TPL_URL)
    .provider(EmptyConfigurationService.serviceName, EmptyConfigurationService)
    .component(ValueEditorComponent.componentName, ValueEditorComponent)
    .name();

value-editor.component.ts

export default class ValueEditorComponent {
    public static componentName = 'kpValueEditor';

    public require = {
        ngModelController: 'ngModel',
        formController: '?^^form'
    };

    public bindings = {
        editorId: '@?',
        name: '@?',
        placeholder: '@?',
        type: '<',
        disabled: '<?',
        visible: '<?',
        validations: '<?',
        options: '<?'
    };

    public controller = ValueEditorComponentController;

    public templateUrl = require('./value-editor.tpl.pug');
}

value-editor.tpl.pug

div(ng-switch="$ctrl.resolveAlias()" ng-show="$ctrl.visible")
    text-value-editor(ng-switch-when="text" ng-model="$ctrl.model" ng-model-options="{ getterSetter: true }")
    number-value-editor(ng-switch-when="number" ng-model="$ctrl.model" ng-model-options="{ getterSetter: true }")
    boolean-value-editor(ng-switch-when="boolean" ng-model="$ctrl.model" ng-model-options="{ getterSetter: true }")
    hidden-value-editor(ng-switch-when="hidden" ng-model="$ctrl.model" ng-model-options="{ getterSetter: true }")
    html-value-editor(ng-switch-when="html" ng-model="$ctrl.model" ng-model-options="{ getterSetter: true }")
    date-value-editor(ng-switch-when="date" ng-model="$ctrl.model" ng-model-options="{ getterSetter: true }")
    acceptable-value-editor(ng-switch-when="acceptable" ng-model="$ctrl.model" ng-model-options="{ getterSetter: true }")
    year-value-editor(ng-switch-when="year" ng-model="$ctrl.model" ng-model-options="{ getterSetter: true }")
    card-number-value-editor(ng-switch-when="card-number" ng-model="$ctrl.model" ng-model-options="{ getterSetter: true }")
    index-selection-value-editor(ng-switch-when="index-selection" ng-model="$ctrl.model" ng-model-options="{ getterSetter: true }")
    autocomplete-value-editor(ng-switch-when="autocomplete" ng-model="$ctrl.model" ng-model-options="{ getterSetter: true }")
    password-value-editor(ng-switch-when="password" ng-model="$ctrl.model" ng-model-options="{ getterSetter: true }")
    signature-value-editor(ng-switch-when="signature" ng-model="$ctrl.model" ng-model-options="{ getterSetter: true }")
    access-number-value-editor(ng-switch-when="access-number" ng-model="$ctrl.model" ng-model-options="{ getterSetter: true }")
    number-range-value-editor(ng-switch-when="number-range" ng-model="$ctrl.model" ng-model-options="{ getterSetter: true }")
    acceptable-root-value-editor(ng-switch-when="acceptable-root" ng-model="$ctrl.model" ng-model-options="{ getterSetter: true }")
    search-text-value-editor(ng-switch-when="search-text" ng-model="$ctrl.model" ng-model-options="{ getterSetter: true }")
    searchable-value-editor(ng-switch-when="searchable" ng-model="$ctrl.model" ng-model-options="{ getterSetter: true }")
    range-value-editor(ng-switch-when="range" ng-model="$ctrl.model" ng-model-options="{ getterSetter: true }")
    list-value-editor(ng-switch-when="list" ng-model="$ctrl.model" ng-model-options="{ getterSetter: true }")
    object-value-editor(ng-switch-when="object" ng-model="$ctrl.model" ng-model-options="{ getterSetter: true }")