Передача данных в пониженный компонент Angular2 в приложении Angular1

Question

Я довольно новичок в Angular, поэтому, пожалуйста, простите меня, если это очевидный вопрос.

С большим количеством проб и ошибок, мне удалось получить мой новый компонент Angular2 с пониженным рейтингом, чтобы он работал в моем приложении Angular1.4. И компонент в основном работает. Единственная проблема - и это большая - заключается в том, что компонент игнорирует все входы, которые я даю на уровне шаблона.

Я думаю, что проблема заключается в том, как я их передаю. Я думаю, что я случайно использую способ Angular2 передавать их вместо Angular1, но у меня возникают проблемы с проверкой этого. Все, что я знаю, это то, что когда я проверяю значение моих переменных @input() из ngOnInit(), они отображаются как неопределенные, хотя я передаю жесткие значения через шаблон.

(К сожалению о форматировании здесь код, кажется, не будет отображаться как текст в противном случае) Breadcrumb.html (в приложении Angular1):

> <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 (в пределах Angular2 компонент "крошка"):

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

Я нашел, в чем проблема. Я забыл включить входы и выходы в качестве свойств в пределах функции downgradeComponent объекта аргумента, например так:

index.ts скоросшивателя ng2Components

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

Надежда кто-то считает, что это полезно.