javascript - 将 AngularJS 指令导入 Angular 2+ 组件不起作用

Question

我正在开发一个同时使用 AngularJS 和 Angular 的应用程序。我迁移了一个名为html-select.directive.tsAngular 组件的指令。我正在该指令中导入另一个指令，即require('directives/angular-html-bind.directive.ts');. 但是在将它迁移到 Angular 组件后，我在控制台上收到以下错误。

angular.js:15697 Error: Template parse errors:
'angular-html-bind' is not a known element:
1. If 'angular-html-bind' is an Angular component, then verify that it is part of this module.
2. If 'angular-html-bind' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("ton" aria-expanded="false" data-toggle="dropdown">
    <div class="oppia-dropdown-menu-text">
      [ERROR ->]<angular-html-bind class="oppia-html-select-selection-element" html-data="options[getSelectionIndex()"): ng:///SharedComponentsModule/HtmlSelectComponent.html@3:6
'angular-html-bind' is not a known element:
1. If 'angular-html-bind' is an Angular component, then verify that it is part of this module.
2. If 'angular-html-bind' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" choice of options" class="dropdown-item float-left">
      <a (click)="select(choice.id)">
        [ERROR ->]<angular-html-bind class="oppia-html-select-option protractor-test-html-multiple-select-option" html-"): ng:///SharedComponentsModule/HtmlSelectComponent.html@10:8
    at syntaxError (compiler.js:2734)
    at TemplateParser.parse (compiler.js:12704)
    at JitCompiler._parseTemplate (compiler.js:28280)
    at JitCompiler._compileTemplate (compiler.js:28268)
    at eval (compiler.js:28212)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:28212)
    at eval (compiler.js:28125)
    at Object.then (compiler.js:2724)
    at JitCompiler._compileModuleAndComponents (compiler.js:28124)

在迁移之前html-select.directive.ts看起来像这样。

require('directives/angular-html-bind.directive.ts');
require('domain/utilities/url-interpolation.service.ts');

// This directive allows user to put html into select's options.
// 'options' should be an array of objects containing attributes 'id' and 'val'
// Attribute 'val' is presented to the user. After user selection, the
// corresponding attribute 'id' is assigned to 'selection'.

angular.module('oppia').directive('htmlSelect', [
  'UrlInterpolationService', function(UrlInterpolationService) {
    return {
      restrict: 'E',
      scope: {
        options: '=',
        selection: '='
      },
      templateUrl: UrlInterpolationService.getDirectiveTemplateUrl(
        '/components/forms/custom-forms-directives/html-select.directive.html'),
      controller: ['$scope', function($scope) {
        $scope.select = function(id) {
          $scope.selection = id;
        };

        $scope.getSelectionIndex = function() {
          for (var index = 0; index < $scope.options.length; index++) {
            if ($scope.options[index].id === $scope.selection) {
              return index;
            }
          }
        };
      }]
    };
  }
]);

迁移html-select.directive.ts到 Angular 组件后，变成了这样。

import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { downgradeComponent } from '@angular/upgrade/static'

require('directives/angular-html-bind.directive.ts');

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

export class HtmlSelectComponent implements OnInit, OnDestroy {
  @Input() options: Array<any>;
  @Input() selection: any;

  constructor () {

  }

  ngOnInit(): void {

  }

  ngOnDestroy(): void {

  }

  select(id) {
    this.selection = id;
  }

  getSelectionIndex() {
    for (var index = 0; index < this.options.length; index++) {
      if (this.options[index].id === this.selection) {
        return index;
      }
    }
  }
}

angular.module('oppia').directive(
  'htmlSelect', downgradeComponent(
    {component: HtmlSelectComponent}));

html-select.component.html文件是这样的——

<div uib-dropdown class="oppia-html-select">
  <button uib-dropdown-toggle class="btn btn-secondary oppia-html-select-selection" type="button" aria-expanded="false" data-toggle="dropdown">
    <div class="oppia-dropdown-menu-text">
      <angular-html-bind class="oppia-html-select-selection-element" html-data="options[getSelectionIndex()].val">
      </angular-html-bind>
    </div> 
  </button>
  <ul uib-dropdown-menu class="oppia-dropdown-menu">
    <li *ngFor="let choice of options" class="dropdown-item float-left">
      <a (click)="select(choice.id)">
        <angular-html-bind class="oppia-html-select-option protractor-test-html-multiple-select-option" html-data="choice.val">
        </angular-html-bind>
      </a>
    </li>
  </ul> 
</div>

我是 Angular 的新手，这就是为什么我无法弄清楚为什么require('directives/angular-html-bind.directive.ts');不能在 Angular 组件中工作。非常感谢任何帮助。

标签： javascriptangularjsangulartypescriptangularjs-directive