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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 作为一个前端程序猿,下面这些站会让你眼前一亮。 amazeui框架组建丰富 http://amazeui.org...
    欧巴冰冰阅读 8,903评论 18 303
  • 今天回顾了一下我以前做的事,基本上可以分成娱乐(如玩游戏),休闲(很不幸,目前写作是在这种状态)以及有短期价值的事...
    zhishijuncc阅读 632评论 0 1
  • 董沛沛 洛阳 焦点讲师班三期 坚持原创分享第118天 没有哪位父母一大早醒来时就打算着要让孩子的生活痛苦不堪。没有...
    缘源流长阅读 446评论 0 0
  • 你转身的脚步那么坚决,你的容颜已经改变。为了你的自由,我的爱情在你转身时烟消云散。 火车已经开始行驶,我把手伸出...
    SN绿萝阅读 295评论 0 1
  • 好的东西习惯了也不觉得它有多好,而糟的东西习惯了依旧知道它有多糟,这大概就是人类的矫情之处。
    王宇宙她姐玉娘阅读 94评论 0 0