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" />

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

<input type="radio" value="1" name="sex" id="sex1" [(ngModel)]="peopleInfo.sex"> <label for="sex1">男 </label>　　　
<input type="radio" value="2" name="sex" id="sex2" [(ngModel)]="peopleInfo.sex"> <label for="sex2">女 </label>

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

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

<option [value]="item" *ngFor="let item of peopleInfo.cityList">{{item}}</option>
</select>

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

爱 好：
<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

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