将 AngularJS 数组传递给降级的 Angular 7 组件

Posted 2023-02-19

【中文标题】将 AngularJS 数组传递给降级的 Angular 7 组件

【英文标题】：Passing an AngularJS Array to a Downgraded Angular 7 Component

【发布时间】：2019-12-29 00:40:55

【问题描述】：

我正在将 AngularJS 应用程序转换为 Angular。我目前正在运行一个混合解决方案，其中大多数组件仍然是 AngularJS 组件，并且正在慢慢地将组件重写为 Typescript。我正在尝试降级要在 AngularJS 模板中使用的 Angular 组件，并且该组件接受列表的 @Input。

Angular 控制器中的输入声明

 @Input() inputName: any;

在 AngularJS 模板中：

@Input 将是字符串 '$ctrl.list'

<downgraded-component input-name="$ctrl.list"></downgraded-component>

@Input 将是一个空字符串

<downgraded-component input-name="$ctrl.list"></downgraded-component>

如何将列表从 AngularJS 组件/模板传递到 Angular 7 组件/模板？

【参考方案1】：

在将来自表达式的数据传递给角度组件时，您需要包含括号[]，如下所示；

<downgraded-component [input-name]="$ctrl.list"></downgraded-component>

在使用降级组件时，您会使用新旧语法的奇怪组合 - kebab case 来自 angularjs，括号来自 angular。