zoukankan      html  css  js  c++  java
  • 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

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

  • 相关阅读:
    hdu 1455 N个短木棒 拼成长度相等的几根长木棒 (DFS)
    hdu 1181 以b开头m结尾的咒语 (DFS)
    hdu 1258 从n个数中找和为t的组合 (DFS)
    hdu 4707 仓鼠 记录深度 (BFS)
    LightOJ 1140 How Many Zeroes? (数位DP)
    HDU 3709 Balanced Number (数位DP)
    HDU 3652 B-number (数位DP)
    HDU 5900 QSC and Master (区间DP)
    HDU 5901 Count primes (模板题)
    CodeForces 712C Memory and De-Evolution (贪心+暴力)
  • 原文地址:https://www.cnblogs.com/fpcing/p/11865234.html
Copyright © 2011-2022 走看看