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

Posted 2023-03-13

【中文标题】将数据传递到 Angular1 应用程序中的降级 Angular2 组件

【英文标题】：Passing data into a downgraded Angular2 component within an Angular1 Application

【发布时间】：2017-05-08 13:06:18

【问题描述】：

我对 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', 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);
        
  

面包屑.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 组件看到我发送到其中的数据有任何建议，我将非常感激！谢谢！

【参考方案1】：

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

ng2Components 文件夹的index.ts

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

希望其他人觉得这很有用。

【讨论】：

输入和输出现在由 downgradeComponent 方法处理。链接到 docs 并在使用带有输入的降级组件时注意 kebab-case。

@SemperCallide 如果底层控制器是一个 Angular 1.4 typescript 类（不是组件），并且具有 controllerAs 语法，那么这种方法是否有效？换句话说，如果 BreadcrumbComponent 位于 Angular 1.4 控制器 /view 之上？

正如@vlapo21 所指出的，我还必须使用[selected-index]="0" 而不是[selectedIndex]="0" 才能使其工作