Angular5+ionic3实践(一)

背景:这几天在做复宏汉霖项目.有个讲者功能这个礼拜就要交付了.没有太多的时间去学习.只能直接看代码上手了.记录一下学到的基础知识点.

[(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的代码.请教了同事很多次.慢慢的理解了这些用法.脑海里大致了解了基础写法.相信多写段时间.我一定能学会的.加油.