【前端】3. angular组件以及组件里面的模板

参考视频：
https://www.bilibili.com/video/av50917863?p=3
https://www.bilibili.com/video/av50917863?p=4

Angular8视频教程-IT营配套笔记如下（参考自大地老师）：

一、 创建 angualr

参考资料：Angular CLI https://cli.angular.io/

1.创建组件：

   ng g component components/header

2.使用组件：

   <app-header></app-header>

二、Angular 绑定数据

1. 数据文本绑定，使用{{}}

<h1>
   {{title}}
</h1>
<div>
   1+1={{1+1}}
</div>

2. 绑定 html

   this.h="<h2>这是一个 h2 用[innerHTML]来解析</h2>"

   <div [innerHTML]="h"></div>

三、绑定属性

   <div [id]="id" [title]="msg">调试工具看看我的属性</div>

四、数据循环 *ngFor

1. 普通循环

<ul>
  <li *ngFor="let item of list">
     {{item}}
  </li>
</ul>

2. 循环的时候设置 key

<ul>
  <li *ngFor="let item of list;let i = index;">
     {{item}} --{{i}}
  </li>
</ul>

3. template 循环数据

<ul>
  <li template="ngFor let item of list">
     {{item}}
  </li>
</ul>

五、条件判断

  <p *ngIf="list.length > 3">这是 ngIF 判断是否显示</p>

  <p template="ngIf list.length > 3">这是 ngIF 判断是否显示</p>

六、用到ngSwitch

<ul [ngSwitch]="score">
   <li *ngSwitchCase="1">已支付</li>
   <li *ngSwitchCase="2">订单已经确认</li>
   <li *ngSwitchCase="3">已发货</li>
   <li *ngSwitchDefault>无效</li>
</ul>

七、执行事件 (click)=“getData()”

<button class="button" (click)="getData()">
   点击按钮触发事件
</button>

<button class="button" (click)="setData()">
   点击按钮设置数据
</button>

getData(){ /*自定义方法获取数据*/
  //获取
  alert(this.msg);
  }
  
setData(){
  //设置值
  this.msg='这是设置的值';
}

八、表单事件

<input type="text" (keyup)="keyUpFn($event)"/>

keyUpFn(e){
   console.log(e)
}

九、双向数据绑定（重要）

注意引入：FormsModule

  import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
   AppComponent,
   HeaderComponent,
   FooterComponent,
   NewsComponent
],
  imports: [
   BrowserModule,
   FormsModule
],
 providers: [],
   bootstrap: [AppComponent]
})
 export class AppModule { 

使用 ：

  <input type="text" [(ngModel)]="inputValue"/> {{inputValue}}

十、[ngClass] 、[ngStyle]

1. [ngClass]:

 <div [ngClass]="{'red': true, 'blue': false}">
    这是一个 div
 </div>

 public flag=false;
 <div [ngClass]="{'red': flag, 'blue': !flag}">
    这是一个 div
 </div>

 public arr = [1, 3, 4, 5, 6];
 <ul>
  <li *ngFor="let item of arr, let i = index">
    <span [ngClass]="{'red': i==0}">{{item}}</span>
  </li>
 </ul>

2. [ngStyle]:

 <div [ngStyle]="{'background-color':'green'}">你好 ngStyle</div>
    public attr='red';
    
 <div [ngStyle]="{'background-color':attr}">你好 ngStyle</div>

十一、管道

 public today=new Date();

 <p>{{today | date:'yyyy-MM-dd HH:mm:ss' }}</p>

其他管道：http://bbs.itying.com/topic/5bf519657e9f5911d41f2a34