angular - 使用es6等一些功能

缺乏、安全感 2021-09-17 15:54 361阅读 0赞

**app.module.ts**

var model = {
            user: 'Admin',
            items: [{
              action: 'buy flowsers', done: false
            },{
              action: 'get shoes', done: false
            },{
              action: 'collect tickets', done: true
            },{
              action: 'call joe', done: false
            }]
          }
    
    
    
    
          export class Model{
            user;
            items;
            constructor(){
              this.user='admin',
                this.items=[
                  new TodoItem("buy1",false),
                  new TodoItem("buy2",false),
                  new TodoItem("buy3",false),
                  new TodoItem("buy4",false)
                ]
            }
          }
    
    
          export class TodoItem{
            action;
            done;
            constructor(action,done){
              this.action = action;
              this.done=done;
            }
          }

![1060535-20180601212123571-1026604730.png][]

新关键字（牵扯到es6 - typeScript）：

export -> es6

class -> es6

constructor -> es6

**app.component.ts**

import { Component } from '@angular/core';
          import { Model } from './app.module';
    
          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./app.component.css']
          })
          export class AppComponent {
            model = new Model();
            getName(){
              return this.model.user;
            }
            title = 'app';
          }

![1060535-20180601212553761-1889833014.png][]

**页面 - > app.component.html**

![1060535-20180601212748309-1191258309.png][]

新写法： \{ \{value\}\} -> 数据绑定

[1060535-20180601212123571-1026604730.png]: /images/20210726/0fb7843b4b7d4dc1bdf86a231cf39925.png
[1060535-20180601212553761-1889833014.png]: /images/20210726/51d1cb44ba884efca22d1a5eafb11c90.png
[1060535-20180601212748309-1191258309.png]: /images/20210726/0124fb2906c148b59f545e21ec703074.png

发表评论取消回复

表情：

评论列表（有 0 条评论，361人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES6中 Promise 对象使用以及一些面试点

`JavaScript`是单线程执行的，由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。我么无法确定异步执行何时会结束，而有些时候我们下

左手的ㄟ右手/ 2023年07月17日 15:57/ 0 赞/ 1 阅读

相关 ES6+功能 set数据结构

set数据结构 ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 Set本身是一个构造函数，用来生成 Set 数据

系统管理员/ 2023年02月27日 14:57/ 0 赞/ 16 阅读

相关 ES6+的功能

ES6+的功能 var、let、const关键字辨析 var 1. 可以重复定义同名变量 var name='Bob'; var name='Tom

小灰灰/ 2023年02月27日 13:47/ 0 赞/ 43 阅读

相关 ES6：测试功能

TL;DR Use the [FeatureTests.io][] service to perform feature tests of ES6+ features. The

忘是亡心i/ 2023年02月22日 03:40/ 0 赞/ 24 阅读

相关 ES6 冷门的一些语法

摸板字变量 var name = 'jhon' var age = 24 var concat = `我的名字是${ name}, 年龄是${ age

我不是女神ヾ/ 2023年01月03日 01:37/ 0 赞/ 159 阅读

相关一些实用的es6特性

Array.prototype.includes(包含,返回数组内是否存在指定元素) [1,2,3,4,5].includes(1) // ====》true

墨蓝/ 2022年07月13日 14:14/ 0 赞/ 454 阅读

相关三十分钟熟悉es6（es6日常使用功能总结）

1、前注关于es6的详细说明，可以参照我的系列文章[es6 从入门到熟练][es6]，或者阮一峰的[ECMAScript 6 入门][ECMAScript 6]。我

╰+攻爆jí腚メ/ 2022年06月08日 06:21/ 0 赞/ 217 阅读

相关 es6 --- 功能

标记的模板文字 1.模板文字！确实很棒。我们不再会这样做…. const concatenatedString = "I am the " + number +

小咪咪/ 2021年12月20日 09:07/ 0 赞/ 235 阅读

相关 ES6拓展的功能

对象初始化简写 ES5我们对于对象都是以键值对的形式书写，是有可能出现键值对重名的。例如： function people(name, age) \{ return \{ na

深碍√TFBOYSˉ_/ 2021年09月30日 02:14/ 0 赞/ 402 阅读

相关 angular - 使用es6等一些功能

app.module.ts var model = { user: 'Admin',

缺乏、安全感/ 2021年09月17日 15:54/ 0 赞/ 362 阅读