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

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

性 别：

<input type="radio" value="1" name="sex" >女 </label>

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

城 市：

<select name="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

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