angularjs – 将数据传递到Angular1应用程序中降级的Angular2组件

我对Angular很新,所以如果这是一个明显的问题,请原谅我.

经过大量的试验和错误,我设法让我的新Angular2组件正确降级,以便它可以在我的Angular1.4应用程序中运行.该组件主要起作用.唯一的问题 – 它是一个很大的问题 – 该组件忽略了我在模板级别提供的所有输入.

我认为问题是我传递它们的方式.我想我可能会意外地使用Angular2方式传递它们而不是Angular1,但是我无法验证它.我所知道的是,当我从ngOnInit()中检查我的@input()变量的值时,它们显示为未定义,即使我通过模板传递硬值.

(对不起这里的格式,代码似乎不会呈现为文本否则)
Breadcrumb.html(在Angular1应用程序中)：

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

Breadcrumb.component.ts(在Angular2组件“breadcrumb”中)：

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组件看到我发送到它的数据有任何建议,我真的很感激它！谢谢！

解决方法

我发现了问题所在.我忘了将输入和输出作为属性包含在downgradeComponent函数参数对象中,如下所示：

index.ts的ng2Components文件夹

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

希望别人觉得这很有用.

angularjs – 将数据传递到Angular1应用程序中降级的Angular2组件

解决方法

猜你在找的Angularjs相关文章