@Input 从 AngularJS 获取变量名

Question

我正在尝试将我的 AngularJS 应用程序迁移到 Angular。

我有一些带有绑定的组件需要转换为 Angular

AngularJS代码：

<my-comp test="test.data" otherData="test.otherData"><my-comp>

我的-comp.ts：

export default {
    template: html,
    bindings: {
        test: '<',
        otherData: '=',
    },
}

我的-comp.html:

<div ng-repeat="val in $ctrl.test">
    {{ val }}
</div>

输出： 1个 2个 3

现在我已经将我的-comp.ts 从 AngularJS 迁移到 Angular

我的-comp.ts:

export class MyCompComponent implements OnInit {
    @Input() test: any;
    @Input() otherData: any;
    ngOnInit() {
        console.log('test: ', this.test);  // prints "test.data"
        console.log('otherData: ', this.otherData); // prints "test.otherData"
    }
}

我的-comp.html:

{{ test }}

实际输出： "test.data"

预期输出： 1 2 3

我正在使用 @Input 与“=”和“<”进行绑定

我将更新后的组件降级，以便它可以在AngularJS代码中使用

<my-comp test="test.data" otherData="test.otherData"><my-comp>

无需写成

<my-comp [test]="test.data" [otherData]="test.otherData"><my-comp>

更新：

Docs

使用 NgUpgrade 我们可以在 AngularJS 模板中使用 Angular 组件（降级）并使用 [] 作为常规 Angular 输入

传递输入

<my-comp [test]="test.data" [otherData]="test.otherData"><my-comp>

Answer 1

您需要像这样使用方括号包含您的组件。参见 Property Binding。

<my-comp [test]="test.data" [otherData]="test.otherData"></my-comp>

@Input 从 AngularJS 获取变量名

@Input gets the variable name from AngularJS

angularjs

angular

ng-upgrade