angular8 大地老师学习笔记

第一课：

angular 创建项目命令： ng new 项目名称

创建组件： ng g 可查看所有创建的对象，ng g component components/home 创建组件，后面跟的是组件的路径，最后生成的目录是app/componetns/home/xxxx各种文件

第四课：

[ngClass]="{ 'green' : status==1 , 'red' : status==0 }" 添加类，当status=1的时候添加green，当status=0的时候添加red

[ngStyle]="{'background-color':'green'}" 加判断的 [ngStyle]="{ 'background-color' : username === 'zxc' ? 'green' : 'red' }"

第五课：

在component.ts 里面获取页面表单数据：

let username = document.getElementById( 'username' );

表单双向绑定需要引入的模块有：

import { NgModule } from '@angular/forms';

import { FormsModule } from '@angular/forms';

页面中使用方法：

姓名：<input type="text" id="username" [(ngModel)]="peopleInfo.username" value="fonm_input" />

-------------------------
性别：

-------------------------

城市：
<select name="city" id="city" [(ngModel)]="peopleInfo.city">

-------------------------

爱好：
<span *ngFor="let item of peopleInfo.hobby;let key=index;">
<input type="checkbox" [id]="'check'+key" [(ngModel)]="item.checked"/> <label [for]="'check'+key"> {{item.title}}</label>

</span>
-------------------------

在html页面中打印对象的方法：　　{{peopleInfo | json}}

第八课：

1、模板中给dom起一个名字
<div #myBox>

我是一个dom节点
</div>

2、在业务逻辑里面引入ViewChild

import { Component, OnInit,ViewChild} from '@angular/core';

3、写在类里面 @ViewChild('myBox') myBox:any;

4、ngAfterViewInit生命周期函数里面获取dom

this.myBox.nativeElement

第九课：父子组件以及组件之间的通讯

巴特西

angular8 大地老师学习笔记

最新文章

热门文章