@Input 从 AngularJS 获取变量名
@Input gets the variable name from AngularJS
我正在尝试将我的 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>
更新:
使用 NgUpgrade 我们可以在 AngularJS 模板中使用 Angular 组件(降级)并使用 [] 作为常规 Angular 输入
传递输入
<my-comp [test]="test.data" [otherData]="test.otherData"><my-comp>
您需要像这样使用方括号包含您的组件。参见 Property Binding。
<my-comp [test]="test.data" [otherData]="test.otherData"></my-comp>
我正在尝试将我的 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>
更新:
使用 NgUpgrade 我们可以在 AngularJS 模板中使用 Angular 组件(降级)并使用 [] 作为常规 Angular 输入
传递输入<my-comp [test]="test.data" [otherData]="test.otherData"><my-comp>
您需要像这样使用方括号包含您的组件。参见 Property Binding。
<my-comp [test]="test.data" [otherData]="test.otherData"></my-comp>