背景:這幾天在做復宏漢霖項目.有個講者功能這個禮拜就要交付了.沒有太多的時間去學習.只能直接看代碼上手了.記錄一下學到的基礎知識點.

[(ngModel)],( ),{{ }}有什麼作用?

打開HTML頁面的代碼.入眼的就是各個[],(),{{}}.這些都是什麼意思呢?

• {{ }}代表的是屬性值.
  例如:<span>{{clientSpeakerRequest?.speakerLevelValue}}</span>的意思就是取clientSpeakerRequest裏面的speakerLevelValue作為值展示到這個<span>標籤中.
• ( )代表的是方法.
  例如:<ion-item (click)="getSpeakerLevel()"></ion-item>的意思就是點擊<ion-item>標籤的時候觸發getSpeakerLevel()方法.
• [(ngModel)]代表的是雙向綁定.
  例如: <ion-input placeholder="請填寫" [(ngModel)]="material.learnDuties"></ion-input>的意思就是把輸入的input的值綁定到material.learnDuties中.

*ngIf,*ngFor有什麼作用?

• *ngIf相當於if條件判斷.
  例如:<span *ngIf="clientSpeakerRequest?.academicTitleValue!==''">{{clientSpeakerRequest?.academicTitleValue}}</span>的意思是當clientSpeakerRequest裏面的academicTitleValue值不等於''的時候再展示clientSpeakerRequest.academicTitleValue
• *ngFor相當於for循環.
  例如:<div *ngFor="let item of meetingModelList;let j=index"></div> 的意思是循環meetingModelList,每一次遍歷的值用item接收.j就是數組的下標.

@Input() @Output()有什麼作用?

• @Input()是子組件向父組件傳值.
  例如:
  子頁面 : @Input() editable: boolean;
  父頁面 : <ion-icon *ngIf="editable"></ion-icon>

• @Output()是父組件向子組件傳值.
  例如:
  子頁面 : @[Output] refreshData = new [EventEmitter](); this.refreshData.emit('refresh');
  父頁面 :

  <campaign-content-edit 
       [pageData]="pageData
       [canEditCampaign]="canEditCampaign"
       (refreshData)="getCampaignModel($event)">
  </campaign-content-edit> 

  父頁面的getCampaignModel方法就能取到'refresh'

@ViewChild有什麼作用?

• 獲取組件頁面的方法,也可以用來傳參.

例如:
A頁面:

ts :

@Component({
  selector: 'page-talker-add',
  templateUrl: 'talker-add.html',
})
export class TalkerAddPage {
  @ViewChild('meetingContent') meetingContent: any;//計劃內容頁面
  constructor(public navCtrl: NavController,
              public navParams: NavParams){}

  ionViewDidLoad() {}
  
  savePlan = () => {
    let model = this.meetingContent.getModel()
    console.log('model',model)
    }
    
 HTML : 
   
<ion-header>
  <ion-navbar color="sky">
    <ion-title>新增講者</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="gray-bg">
  <ng-container>
    <talker-content #meetingContent></talker-content>
  </ng-container>
  <div style="width: 100%;height: 100px;"></div>
</ion-content>
<ion-footer>
  <ion-toolbar color="stable" padding>
    <button ion-button no-margin block (click)="savePlan()" color="sky">
      提交
    </button>
  </ion-toolbar>
</ion-footer>

A頁面在觸發提交的click方法savePlan()的時候.會調用獲取組件頁面傳遞過來的meetingModelList的值.就是組件HTML頁面上的列表的值.

組件頁面:

ts :

@Component({
  selector: 'talker-content',
  templateUrl: 'talker-content.html'
})
export class TalkerContentComponent {
  meetingModelList: any={
    periodical:[],
    qualification:[]
  }
  getModel = () => this.meetingModelList;
  }
  
 HTML : 

<ion-item-group no-padding>
<div *ngFor="let material of meetingModelList?.periodical;let j=index">
    <ion-item-divider color="stable" class="ion-item-divide" tappable>
      <span class="font-15">期刊信息（{{j+1}}）</span>
      <span item-end class="color-red" (click)="periodicalDelete(j)">&nbsp;&nbsp;<ion-icon name="trash-outline"></ion-icon>&nbsp;&nbsp;</span>
    </ion-item-divider>
    <!--  期刊級別  -->
    <ion-item tappable (click)="getJournaData(material)">
      <ion-label class="font-15">期刊級別</ion-label>
      <span item-end class="font-15 text-normal" align-items-center justify-content-end>
        <span [ngClass]="{'color-Hui':!editable}">{{material?.journalLevel}}</span>&nbsp;
        <span class="color-Hui" *ngIf="material?.journalLevel==''">請選擇</span>&nbsp;
        <ion-icon name="ios-arrow-forward" class="font-18 color-gray" *ngIf="editable"></ion-icon>
      </span>
    </ion-item>
    <!--  期刊名稱  -->
    <ion-item>
      <ion-label class="font-15">期刊名稱</ion-label>
      <ion-input item-end class="font-14" text-end placeholder="請填寫" type="text" [disabled]="!editable" [(ngModel)]="material.journalTitle"></ion-input>
    </ion-item>
    <!--  文章名稱  -->
    <ion-item>
      <ion-label class="font-15">文章名稱</ion-label>
      <ion-input item-end class="font-14" text-end placeholder="請填寫" type="text" [disabled]="!editable" [(ngModel)]="material.journalDuties"></ion-input>
    </ion-item>
  </div>
</ion-item-group>

總結:

今天看了一天的Angular和ionic的代碼.請教了同事很多次.慢慢的理解了這些用法.腦海裏大致瞭解了基礎寫法.相信多寫段時間.我一定能學會的.加油.