Question

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

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

AngularJS代码：

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

my-comp.ts：

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

my-comp.html：

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

输出： 1个 2 3

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

my-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"
    }
}

my-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 Component（降级），并使用[]作为常规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获取变量名称

1 个答案: