Question

我正在尝试使用如下所述的组件指令模式在TypeScript中创建一个简单的Angular 1 + 2混合应用程序：https://angular.io/docs/ts/latest/guide/upgrade.html#!#using-angular-1-component-directives-from-angular-2-code

我使用了常规指令声明，但我无法使用组件指令。

只是为了上下文化：我实际上是在创建一个新的Angular 2应用程序，但是我需要一个尚未转换的组件，称为Formly，所以我在考虑同时使用Angular 1版本。 / p>

完整代码在此处：https://plnkr.co/edit/J5rK48?p=preview

我在指南中的heroDetail示例之后创建了一个组件指令：

export const tstv1 = {
  template: `<a>Angular 1: {{value}}</a><br/>`,
  controller: function($scope) {
    $scope.value = 'Angular 1';
  }
};

然后我尝试通过升级组件来使用它：

const tstv1 = upgradeAdapter.upgradeNg1Component('tstv1')

然而，这会引发错误：

[$ injector：unpr]未知提供者：tstv1DirectiveProvider＆lt; - tstv1Directive http://errors.angularjs.org/1.5.0-rc.1/ $注射器/ unpr＆GT; P0 = tstv1DirectiveProvider％20％3 C-％20tstv1Directive

我做错了什么？

此外，示例没有component指令的import语句。我应该加或不加？我已经尝试了两种方法，它无论如何都无法正常工作。如果没有导入，Angular将如何知道从何处获取指令？

我试过这样：

import {tstv1} from 'src/tstv1/tstv1.component'

就像我说的那样，我使用常规指令工作：

app.directive('tstv1directive', function() {
        return {
            restrict: 'E',
            require: '?ngModel',
            template: '<a>Inside directive: {{value}}</a>',
            controller: function($scope) {
              $scope.value = "Works!"
            }
        }
    }))

我可以升级并使用它就好了：

upgradeAdapter.upgradeNg1Component('tstv1directive')

Answer 1

查看工作日期：https://plnkr.co/edit/nAiqX2w4ENkYd6Z8db7M?p=preview

“创建”组件指令的方式实际上只是创建一个对象，您必须将其注册为组件。

参见main.ts

app.component('tstv1', tstv1);

你必须在main.ts中导入tstv1对象

之后，只需将其降级为您使用常规指令进行降级。

Angular 2 upgradeNg1Component无法正常工作 - 未知提供商

1 个答案: