Angular

Angular语法

联系站长 作者:web知道 来源:未知 2020-01-04 13:36 我要评论

Angular语法...

插值表达式  {{text}}
事件绑定  (click)="clickHandler('参数')"    获取事件对象  (click)="clickHandler($event)"
赋值    this.text = '值'
if判断  *ngIf=""

for    *ngFor="let item of list;let i = 'index';trackBy:函数"     trackBy类似VUE的key,用于性能优化
         函数(index:number,item:any):any{
            console.log(arguments)
            return item.id
         }
         或
        <li *ngFor="let item of list;let i = 'index';trackBy:item?.id">{{item.name}}{{i}}</li>

ngSwitch指令组    用于多值判断显示
     <div [ngSwitch]="test">
          <p *ngSwitchCase="'湛江'">湛江吃海鲜</p>
          <p *ngSwitchCase="'梅录'">梅录吃炒粉</p>
          <p *ngSwitchCase="'振文'">振文吃粉皮</p>
          <p *ngSwitchDefault>卖完了</p>
     </div>


属性指令使用[]
   如[innerHTML] [href]  [src]

ngContainer的作用
    Angular不能一个元素使用多个标签,所以ngContainer是用来解决这个问题
    <ul>
       <ng-container *ngFor="let item of list;let i = 'index';trackBy:item?.id">
           <li *ngIf="i % 2 ==0">{{item.name}}{{i}}</li>
       </ng-container>
    </ul>

双向数据绑定
    在angular中使用双向数据绑定需要进行如下操作
    在app.module.ts页面引入  import { FormsModule } form '@angular/forms'
    在import中添加FormsModule 
    [(ngModel)]='属性'    <input type="text" [(ngModel)]="test">

动态class
  单个
    语法   [class.css类名]='表达式'
    <div [class.awfifnypm]='status'>
        <button (click)='status = !status'>点击切换</button>
    </div>
 批量
   语法 [ngClass]='classHandler'
   在AppComponent下写上
   classHandler = {
        类名:表达式;
        类名:表达式;
        awfifnypm:this.status
    }

动态style
  单个
    语法   [style.属性]='表达式'
    <div [style.fontSize]='属性'>
    </div>
    属性 = '18px'
 批量
   语法 [ngStyle]=' styleHandler'
   在AppComponent下写上
   styleHandler= {
        fontSize:15px
    }
 




本文如有侵犯版权请联系站长删除。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评
精彩导读