angular 4x 模板

HTML

导入

引入HTML

templateUrl: '...html'

Or

template: `
  ...
`

styleUrls 接受一个数组

---

模板语法

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

<li *ngFor="let i of arr">
    {{i}}
 </li>
//  带索引的： *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) // 原生参数
}

<br />

---

深入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--