背景:这几天在做复宏汉霖项目.有个讲者功能这个礼拜就要交付了.没有太多的时间去学习.只能直接看代码上手了.记录一下学到的基础知识点.
[(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)"> <ion-icon name="trash-outline"></ion-icon> </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>
<span class="color-Hui" *ngIf="material?.journalLevel==''">请选择</span>
<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的代码.请教了同事很多次.慢慢的理解了这些用法.脑海里大致了解了基础写法.相信多写段时间.我一定能学会的.加油.