从 angular 2 降级到 angularJS 的指令组件未按预期工作

Question

这是我的 angular 2 组件：

@Component({
  selector: '[my-component]',
  template:`<ng-content></ng-content>`
})
export class MyComponentClass {
  @Input() myComponent: string;

...

这允许我在 Angular 2 应用程序中将其用作任何 html 标记的指令，例如：

<div [myComponent]="'my text string'"></div>
<span [myComponent]="'my text string'"></span>

但是当在 angularJs 应用程序中使用相同的组件降级时：

angular.module('myApp')
    .directive('myComponent', downgradeComponent({component: MyComponentClass , inputs: ['myComponent']}) as angular.IDirectiveFactory);

现在这行不通了：

 <div [myComponent]="'my text string'"></div> // or
<div [my-component]="'my text string'"></div>

仅当我将其用作组件时

<my-component [my-component]="'some text'"></my-component>

我做错了什么？ 我不希望它被用作新的 html 标签，而是作为可以添加到任何 html 元素（指令）的指令。

Answer 1

我遇到了同样的问题，并在以下位置找到了一个词：https://github.com/angular/angular/issues/16695#issuecomment-336456199

Answer 2

尝试使用downgradeNg2Component 而不是downgradeComponent：

import {UpgradeAdapter} from 'angular2/upgrade';
import {myComponent} from './my-component.component.ts';

let upgradeAdapter = new UpgradeAdapter();

.directive('myComponent',  
   upgradeAdapter.downgradeNg2Component(myComponent))

检查这个useful post！