1

我正在尝试将我的 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

现在我已将 my-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>

更新：

文档

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

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

1 回答 1

2

您需要使用方括号包含这样的组件。请参阅属性绑定。

<my-comp [test]="test.data" [otherData]="test.otherData"></my-comp>
于 2019-01-04T14:56:26.567 回答