angular 4x 模板

HTML

导入

引入HTML

templateUrl: '...html'

Or

template: `
  ...
`

styleUrls 接受一个数组


模板语法

#######数组遍历 *ngFor (F大写)

  • {{i}}
  • // 带索引的: *ngFor="let hero of heroes; let i=index"

    Tips: 里面的表达式,不支持原生0.0 也就是那是用正则解析的,no eval
    其实我更喜欢原生的,不过他也自带了很多东西
    *ngIf Api https://www.angular.cn/docs/ts/latest/api/common/index/NgFor-directive.html

    条件 *ngIf

    这个没啥好讲的

    样式控制
    • [class.hidden]
    • [style.display]
    给原生属性添加值

    [src]
    [href]

    [ngStyle]

    [ngStyle] = 'imgstyle'
    ----------
    .ts:
        imgstyle = {
            width : '100px'
        }
    

    style单设置

    [style.width] = 'width'
    

    事件

    事件名用括号包围

    (click) = "submit()"
    

    点击时间 click
    获取用户输入 keyup

    用 $event 是元素的参数。可以引入来使用

    (click)="submit($event)"
    
    .ts
    submit(e){
      console.log(e) // 原生参数
    }
    
    



    深入ng需要学习的链接

    ts (typeof)
    链接: https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html

    es 6/7/8
    链接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_7_support_in_Mozilla

    OK

    --END--

    你可能感兴趣的:(angular 4x 模板)