angular

花匠小妙招
2024-11-24 20:49

文件：

ng serve --open // 或者 npm start 123

browerslist可以支持ie9-ie11. eg:not IE 9-11；

使用socket.io的时候，报global is not defined 错误，如何解决？Polyfills.ts中加入：(window as any).global = window
Eg:http://www.ionic.wang/article-index-id-132.html

类型优先级：
Public>protect(当前类和子类里使用)>private(html中可以渲染的)

基本点：

绑定数据：{{msg}}绑定属性：[title]="msg"
属性拼接：

<div [title]="msg+'111'">{{msg}}</div> 1 解析html：

<span [innerHTML]='content'></span> 12

// 定义一个数组，数组项为any类型 public list:any[] public items:Array<string> 1234

*ngFor的索引值：

<li *ngFor="let item of list;let i = index;"> <li *ngFor="let item of list;index ad i;"> 12

图片：
路径可以不用../，直接使用assets就可以：

// 静态 <img src="assets/images/02.png" alt="收藏" /> // 动态 <img [src]="picUrl" /> 1234 *ngSwitch

<span [ngSwitch]="orderStatus"> <p *ngSwitchCase="1"> 表示已经支付 </p> <p *ngSwitchCase="2"> 支付并且确认订单 </p> <p *ngSwitchCase="3"> 表示已经发货 </p> <p *ngSwitchDefault> 无效订单 </p> </span> 1234567891011121314 ngClass和ngStyle

参考: https://blog.csdn.net/weixin_42995876/article/details/100543388

<div [ngClass]="{'orange':flag,'red':!flag}"> <div [class.colorRed]="true">我是class.className</div> 123

<p [ngStyle]="{'color':'blue'}">我是一个p标签</p> <h3 [style.color]="'red'">我是一个标题</h3> 123 管道
参考：http://bbs.itying.com/topic/5bf519657e9f5911d41f2a34

cli命令生成的文件：

@Pipe({ name: 'welcome' }) export class WelcomePipe implements PipeTransform { transform(value: any, args?: any): any { return null; } } 12345678910

修改后：

@Pipe({ name: 'welcome' }) export class WelcomePipe implements PipeTransform { transform(value: any, args?: any): any {// 做处理 if(!value) return value; if(typeof value!=='string'){ throw new Error('非法字符'); } return 'welcome toooo '+value; } } 123456789101112131415

使用：

<div>{{msg | welcome}}</div> 1

不解析ng的语法，ngNonBindable：

<div ngNonBindable>{{msg | welcome}}</div> 1

str.repeat(3)，字符串的repeat方法，参考：https://blog.csdn.net/ixygj197875/article/details/79090566

事件

普通事件click
表单事件：keyup，keydown，等

双向数据绑定

<input type="text" [(ngModel)]='keywords' /> 1

<li>性别： <input type="radio" value="1" name="userSex" id="sex1"> <label for="sex1">男</label> <input type="radio" value="2" name="userSex" id="sex2"> <label for="sex2">女</label> </li> 123456

label中for 的id名，为了点击汉字的时候也可以选择radio。

双向数据绑定：当ngModel绑定的值==value的时候，radio选中状态。

<input type="radio" value="2" name="userSex" id="sex2" [(ngModel)]="peopleInfo.userSex"> 1