Angular1アプリケーション内のダウングレードされたAngular2コンポーネントへのデータの受け渡し

Question

私はAngularの新機能ですので、これが明白な質問であれば私を許してください。

多くの試行錯誤の末、新しいAngular2コンポーネントを正しくダウングレードして、Angular1.4アプリケーションで動作させることができました。コンポーネントはほとんどの場合動作します。唯一の問題は、コンポーネントがテンプレートレベルで与えるすべての入力を無視するということです。

問題は、私がそれらを渡している方法だと思います。私は誤ってAngular1の代わりにAngular2の方法を使用しているかもしれないと思っています。私が知っているのは、ngOnInit（）内の@input（）変数の値をチェックすると、テンプレートから厳密な値を渡していても、未定義として表示されていることです。

（ここでは、フォーマットについては申し訳ありません、コードがそうでなければテキストとしてレンダリングするようではありません） Breadcrumb.html（Angular1アプリケーション内）：Angular2内

> <breadcrumb <!-- These two inputs are coming in as 'undefined'??--> 
>  [options]="[ 
>  {name: 'Option 1', disabled: false}, 
>  {name: 'Option 2', disabled: false}, 
>  {name: 'Option 3', disabled: true} 
>  ]" 
>  [selectedIndex]="0" 
>  (selectionMade)="logOutput($event)" 
> </breadcrumb> 

Breadcrumb.component.ts（成分 "ブレッドクラム"）：

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-breadcrumb', 
    template: require('./breadcrumb.component.html') 
}) 
export class BreadcrumbComponent implements OnInit { 
    @Input() options : Array<any>;  
    @Input() selectedIndex : number; 
    @Output() selectionMade : any = new EventEmitter(); 

    private selected : any; 

    selectOption(option: any, broadcastSelection: boolean = true) { 
    if(this.selected === option || option.disabled) { 
     return; 
     } 
    this.selected = option; 
    if(broadcastSelection) { 
     this.selectionMade.emit(this.selected); 
     } 
    } 

    ngOnInit() { 
     console.log('Inside breadcrumb ngOnInit!'); 

     console.log(options); //<---- Showing up as undefined! 
     console.log(selectedIndex); //<---- Showing up as undefined! 

    if(this.selectedIndex !== undefined) { 
     this.selectOption(this.options[this.selectedIndex], false); 
     } 
    } 

} 

breadcrumb.component.html：

(INSIDE BREADCRUMB DIRECTIVE) <!-- This is showing up and nothing else, because none of my @input values are coming through --> 

<span class="breadcrumb" *ngFor='let option of options;let last = last'> 
    <span 
    (click)="selectOption(option)" 
     [ngClass] = "{ 
      'selected' : selected, 
      'disabled' : option.disabled 
     }" 
    > 
    {{option.name}} 
    </span> 
    <span *ngIf="!last"> 
    > 
    </span> 
</span> 

誰かが、私がAngular2コンポーネントに送信しているデータを表示させる方法について提案があれば、本当にありがとう！ありがとうございました！

Answer 1

問題が何かを発見しました。 ng2Componentsフォルダの

index.ts

angular 
    .module('example', []) 
    .directive(
     'breadcrumb', 
     downgradeComponent({ 
      component: BreadcrumbComponent, 
      inputs: ['options', 'selectedIndex'],  //required! 
      outputs: ['selectionMade']     
     })); 

他の誰かが、これは重宝希望：私はそうのように、downgradeComponent関数の引数オブ​​ジェクト内のプロパティとして入力と出力を含めるのを忘れていました。