演示

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"，并且类型为字符串。

这些是我尝试实现这一目标的各种方式，到目前为止都没有。

<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: '@'
    }
});

演示

＆＃13;

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: '<'
        }
});

＆＃13;

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

＆＃13;

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

1 个答案:

演示