如何在没有变量引用的情况下内联设置组件绑定的值？

Question

如果我有一个像这样布局的组件

module my.component {
    'use strict';
    angular.module('example')
        .component('customcomponent',
        {
            templateUrl: 'some/folder/structure/withmyfile.html',
            controller: 'componentController',
            bindings: {
                myBinding: '<'
            }
        });
}

而控制器，componentController是这样设计的

module my.component {
    'use strict';

    class ComponentController {
        myBinding: string;

        $onInit = () => {
            console.log(this.myBinding);
        };
    }

    angular.module('example')
        .controller('componentController', ComponentController);
}

我似乎无法在不使用变量引用的情况下设置内联绑定。如果我在另一个 html 文件中调用我的组件，并尝试像这样设置绑定的值

<customcomponent my-binding="test"></customcomponent>

我的目标是组件将被调用，控制器将被执行，值 "test" 将从 html 中的内联声明传递到变量 myBinding 在控制器中。

因此当 console.log(this.myBinding); 执行时，控制台应该读取单词 "test" 并且是字符串类型。

这些是我尝试过的各种方法，none 到目前为止都奏效了。

<customcomponent my-binding="test"></customcomponent>
<customcomponent my-binding="\'test\'"></customcomponent>
<customcomponent my-binding="{{test}}"></customcomponent>
<customcomponent my-binding="{{"test"}}"></customcomponent>
<customcomponent my-binding="{{\"test\"}}"></customcomponent>

那么是否可以像为 placeholder 属性设置值那样为绑定内联设置值？

Answer 1

如果要绑定到值为 test 的字符串，请使用单向 '<'，绑定引用的字符串：

<customcomponent my-binding="'test'">
</customcomponent>

app.component('customcomponent',
{
    templateUrl: 'some/folder/structure/withmyfile.html',
    controller: 'componentController',
    bindings: {
        myBinding: '<'
    }
});

或使用属性，'@'，不带引号的绑定：

<customcomponent my-binding="test">
</customcomponent>

app.component('customcomponent',
{
    templateUrl: 'some/folder/structure/withmyfile.html',
    controller: 'componentController',
    bindings: {
        myBinding: '@'
    }
});

演示

angular.module('app',[])
.component('customcomponent', {
        template:
            `<div>my-binding={{$ctrl.myBinding}}
            </div>`       
        ,
        controller: function($scope) {
            this.$onInit = () => {
                console.log("my-binding=",this.myBinding);
            };
        },
        bindings: {
            myBinding: '<'
        }
});

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
    <customcomponent my-binding="'test'">
    </customcomponent>
</body>

如何在没有变量引用的情况下内联设置组件绑定的值？

How to set the value of a component binding inline without a variable reference?

angularjs

angularjs-components

演示