Angular5+ionic3实践(一)

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

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

打开HTML页面的代码.入眼的就是各个[],(),{{}}.这些都是什么意思呢?

• {{ }}代表的是属性值.
  例如:{{clientSpeakerRequest?.speakerLevelValue}}的意思就是取clientSpeakerRequest里面的speakerLevelValue作为值展示到这个标签中.
• ( )代表的是方法.
  例如:的意思就是点击标签的时候触发getSpeakerLevel()方法.
• [(ngModel)]代表的是双向绑定.
  例如: 的意思就是把输入的input的值绑定到material.learnDuties中.

*ngIf,*ngFor有什么作用?

• *ngIf相当于if条件判断.
  例如:{{clientSpeakerRequest?.academicTitleValue}}的意思是当clientSpeakerRequest里面的academicTitleValue值不等于''的时候再展示clientSpeakerRequest.academicTitleValue
• *ngFor相当于for循环.
  例如:
  的意思是循环meetingModelList,每一次遍历的值用item接收.j就是数组的下标.

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

• @Input()是子组件向父组件传值.
  例如:
  子页面 : @Input() editable: boolean;
  父页面 :

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

  父页面的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 : 
   

  
    新增讲者
  



  
    
  
  



  
    
      提交
    
  

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 : 



    
      期刊信息（{{j+1}}）
          
    
    
    
      期刊级别
      
        {{material?.journalLevel}} 
        请选择 
        
      
    
    
    
      期刊名称
      
    
    
    
      文章名称
      
    
  

总结:

今天看了一天的Angular和ionic的代码.请教了同事很多次.慢慢的理解了这些用法.脑海里大致了解了基础写法.相信多写段时间.我一定能学会的.加油.