Herabstufung Richtlinie Komponente von Winkel 2 bis AngularJS funktioniert nicht wie erwartet

Question

Hier meine Winkel 2 Komponente ist:

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

... 

Dies ermöglicht es mir in Winkel 2 App dies als Richtlinie für jeden HTML-Tag verwenden, zum Beispiel:

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

Aber wenn die gleiche Komponente Herabstufung Einnahme in AngularJS App verwendet werden:

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

Jetzt wird dies nicht funktionieren:

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

Nur wenn ich es als Komponente wie

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

verwenden, was ich falsch gemacht? Ich möchte nicht, dass es als neues HTML-Tag verwendet wird, sondern als eine Direktive, die zu jedem HTML-Element (Direktive) hinzugefügt werden kann.

Answer 1

Try downgradeNg2Component statt downgradeComponent mit:

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

let upgradeAdapter = new UpgradeAdapter(); 

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

prüfen diese useful post!

Answer 2

ich das gleiche Problem getroffen habe und ein Wort um zu Hause: https://github.com/angular/angular/issues/16695#issuecomment-336456199