javascript - Angular 1 组件绑定(bind)不评估父 Controller 变量

Question

我遇到了一个问题，我似乎无法获取使用组件的 Controller 范围内的属性值，因此如果我只输入一个数字作为属性，我就会得到预期的结果但尝试做类似 $ctrl.val 的事情会让我在我的能力范围内未定义，但 3 会给出正确的结果。有谁知道为什么会发生这种情况？

我有一个像这样的组件:

function RatingController() {
    let vm = this
    this.$onInit = function() { 
        console.log("rating: ", vm.rating)
    }
}

export default {
    bindings: {
        rating: '='
    },
    controller: RatingController,
    template: `
     <span>{{ $ctrl.rating }}</span
    `,
}

然后我像这样初始化它:

 <div ng-controller="MainCtrl as main">
    <star-rating rating="main.rating"></star-rating>
 </div>

上面的内容在我的组件中始终具有未定义的评级，但是这样做将给出预期的结果

<div ng-controller="MainCtrl as main">
    <star-rating rating="3"></star-rating>
 </div>

主控件:

export default function CakeController(requestCakes, $routeParams) { 
    let vm = this
    requestCakes.getOne($routeParams.id).then((res) => {
        //compose objects together

        vm = Object.assign(vm, res.data)
    }) 
}

Answer 1

您在组件中绑定(bind)了错误的属性。您尝试绑定(bind)rating在组件配置中，但您的组件属性称为 heartrating

答案更新

main.rating组件初始化时尚未定义值(主 Controller 异步加载数据)。尝试使用$onChanges钩子(Hook)而不是 $onInit 。此外，您应该使用单向数据绑定(bind)(使用 < 而不是 = )，因为 $onChanges每当更新单向绑定(bind)时都会调用 hook(根据 Angular docs )，并且在使用组件时不建议使用 2 向数据绑定(bind)