Background: these days in the Fuhong Hanlin project. A speaker feature is being delivered this week. There is not much time to study. Just look at the code and get started. Write down the basics.

[(ngModel)].( ).{{}}What does it do?

The code to open the HTML page. [],(),{{}}. What do they mean?

  • {{}} represents the value of an attribute.

    Such as:<span>{{clientSpeakerRequest? .speakerLevelValue}}</span>It means to takeclientSpeakerRequestThe inside of thespeakerLevelValueI’m going to show this as a value<span>Tag.
  • () stands for method.

    Such as:<ion-item (click)="getSpeakerLevel()"></ion-item>“Click” means click<ion-item>When the tag is triggeredgetSpeakerLevel()Methods.
  • [(ngModel)] represents a two-way binding.

    Such as:<ion-input placeholder=" Please fill in "[(ngModel)]=" material.learnduties "></ion-input>It means to put the inputinputIs bound tomaterial.learnDutiesIn the.

*ngIf.*ngForWhat does it do?

  • *ngIfThe equivalent ofifConditional judgment.

    Such as:<span *ngIf="clientSpeakerRequest? .academicTitleValue! ==''">{{clientSpeakerRequest? .academicTitleValue}}</span>It means whenclientSpeakerRequestThe inside of theacademicTitleValueValue is not equal to' 'I’ll show it to you at the timeclientSpeakerRequest.academicTitleValue
  • *ngForThe equivalent offorCycle.

    Such as:<div *ngFor="let item of meetingModelList; let j=index"></div>Cycle means cyclemeetingModelList, the value of each traversal is received as item.jThat’s the index of the array.

@Input() @Output()What does it do?

  • @Input()Is a child component passing a value to a parent component.

    Such as:

    Child pages:@Input() editable: boolean;

    The parent page:<ion-icon *ngIf="editable"></ion-icon>

  • @Output() is the parent component passing a value to the child component. For example: @[Output] refreshData = new [EventEmitter](); this.refreshData.emit(‘refresh’); The parent page:

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

    The getCampaignModel method on the parent page can fetch ‘refresh’

@ViewChildWhat does it do?

  • A method to get a component page, which can also be used to pass parameters.

For example: page 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> new speaker </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"> Submission </button> </ion-toolbar> </ion-footer>

A page when the submitted click method savePlan() is triggered. The value of the MeetingModellList passed by the component page is called. Is the value of the list on the component’s HTML page.

Component page:

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 </span> > <span item-end class="color-red" (click)=" PeriodicalDeletion (j)" bbb&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 == ""> Select </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>
Conclusion:

I’ve been looking at Angular and Ionic code all day. I consulted my colleagues many times. I began to understand these usages. I’ve got the basics in my head. Trust to write for a while. I’m sure I’ll learn. Come on.