angular2属性绑定

最新推荐文章于 2022-08-14 00:57:08 发布

不过期的约定

最新推荐文章于 2022-08-14 00:57:08 发布

阅读量1.5k

点赞数

分类专栏： angular2 文章标签： angularjs2

angular2 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使组件的标题每秒随机换色一次

-代码开发如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件开发--模版基本语法</title>
    <script src="lib/system.js"></script>
    <script src="lib/system.config.js"></script>
    <script src="lib/angular2-polyfills.js"></script>
    <script src="lib/angular2.dev.js"></script>
    <script src="lib/Rx.js"></script>
    <script src="lib/typescript.js"></script>
    <script src="lib/tsloader.js"></script>
    <script src="lib/router.dev.js"></script>
    <script src="lib/http.dev.js"></script>

</head>
<body>
    <h1>属性绑定--[property]</h1>
    <my-app></my-app>
    <script type="text/typescript">
    import {Component} from "angular2/core";
    import {bootstrap} from "angular2/platform/browser";

        @Component ({
            selector:"my-app",
            template:`<h1 [style.color]="color">我是标题</h1>
             `
        })

        class myApp{
            constructor(){
            this.color="red";
            setInterval(()=>{
    this.color='#'+parseInt(Math.random()*0xffffff).toString(16);
            },1000); 
            }
        }

        bootstrap(myApp);
    </script>
</body>
</html>

-constructor内代码可以更换其他写法

constructor(){
            this.color="red";
            var selfColor=this;
            setInterval(()=>{
    selfColor='#'+parseInt(Math.random()*0xffffff).toString(16);
    },1000); 
}

当然还可以用复杂一点的，红、绿、蓝三色随机取值后赋值给this.color