Angular DAY02

Angular02

脚手架

使用时, 需要安装脚手架, 利用脚手架生成项目包; 然后编写代码.
生成命令:
ng new ngpro ；
用法:
• 双标签的内容: {{ 变量 }}
• 属性: [属性名]=“值” 或 属性名="{{ 值 }}"
• 事件: (事件名)=“方法名()”
• 双向数据绑定: [(ngModel)]=" 变量 "
– 注意: 默认不加载Form模块, 必须手动加载 且 加载后必须重启命令行才能生效!
• 组件的使用:

–	1个组件由3个文件组成: html css ts
–	主文件为: ts. 在ts中合并 html css
–	生成命令: ng g c 组件名

• 启动命令: ng s 或 ng s -o ；

今日内容
动态样式
在vue中:

:sytle="{属性名: 值, 属性名: 值}"
:class="{样式名: true/false}" true有效 false无效

创建组件: myc01

ng g c myc01
<p>myc01 works!</p>

<button (click)="size = size + 2">{{ size }}</button>

<!-- 
  在vue中:  :style="{属性名:值, ..}"

  在ng中: [ngStyle]="{属性名:值, ..}"
  快捷提示: ng-style

  对象的属性名 命名要求:  只允许 数字 字母 _ 
  css的默认 font-size 中的 - 中划线是非法字符
  解决方案: 'font-size' 或者 fontSize
 -->
<div [ngStyle]="{ color: 'blue', 'font-size': size + 'px' }">Hello World!</div>

<div [ngStyle]="{ color: 'blue', fontSize: size + 'px' }">Hello World!</div>

<div style="background-color: gray">
  <!-- size <20 success -->
  <!-- size >=20 <=30 warning -->
  <!-- size >30 danger -->
  <!-- 
    同vue:  class="{样式名: true/false}"  true有效 false无效
   -->
  <span
    [ngClass]="{
      success: size < 20,
      warning: size >= 20 && size <= 30,
      danger: size > 30
    }"
    class="base"
    >{{ size }}</span
  >
</div>

条件渲染

在vue中:

v-if

创建组件: myc02

ng g c myc02

<p>myc02 works!</p>

<h3>面试分数: {{ score }}</h3>

<input type="number" [(ngModel)]="score" />

<!-- 
  在vue中: v-if
  在ng中: *ngIf  快捷提示 ng-if

  条件渲染: 满足条件的标签 会显示
 -->
<p *ngIf="score < 60">不及格</p>
<p *ngIf="score >= 60">及格</p>

<hr />
<!-- angular也存在 else 写法, 但是使用较少 -->

<!-- 快捷: ng-if-else -->
<ng-container *ngIf="score < 60; else abc">
  <p>不及格</p>
</ng-container>
<!-- #: 是ng模板中的特殊表示, 相当于 id= ;用于设定唯一标识 -->
<ng-template #abc>
  <p>及格</p>
</ng-template>

列表渲染

在vue中:

v-for="(item,index) in items" :key="index"

组件: myc03

ng g c myc03
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-myc03',
  templateUrl: './myc03.component.html',
  styleUrls: ['./myc03.component.css'],
})
export class Myc03Component implements OnInit {
  names = ['亮亮', '然然', '东东', '华哥', '小新'];

  constructor() {}

  // 自定义函数: 5 -> [1,2,3,4,5]
  range(num) {
    let arr = [];

    for (let i = 1; i <= num; i++) {
      arr.push(i);
    }

    return arr;
  }

  ngOnInit(): void {}
}
<p>myc03 works!</p>

<!-- 
  在vue中:  v-for="(item,index) in items" :key="index"
 -->

<ul>
  <!-- 快捷: ng-for -->
  <li *ngFor="let item of names">
    {{ item }}
  </li>
</ul>

<ul>
  <!-- 快捷: ng-for-index -->
  <li *ngFor="let item of names; let i = index">
    <span>{{ i }}</span>
    <span>{{ item }}</span>
  </li>
</ul>

<!-- 不需要key写法! -->

<!-- 注意:  与vue差异 -->
<!-- 
  在vue中, 可以遍历数字
  v-for="item in 4"  会得到  1 2 3 4

  在ng中, 不具备这种便捷方式
 -->
<ul>
  <li *ngFor="let item of range(4)">{{ item }}</li>
</ul>

<table border="1">
  <tr>
    <td>序号</td>
    <td>姓名</td>
    <td>年龄</td>
    <td>手机号</td>
  </tr>
  <tr
    [ngClass]="{ young: item.age <= 20 }"
    *ngFor="let item of emps; let i = index"
  >
    <td>{{ i + 1 }}</td>
    <td>{{ item.name }}</td>
    <td>{{ item.age }}</td>
    <td>{{ item.phone }}</td>
  </tr>
</table>
.young {
  background-color: green;
  color: white;
}

管道Pipe

在vue中, 称为 filter 过滤器
使用时: {{ 变量 | 过滤器名 : 参数: 参数...}}
angular中存在于vue相同的 修改变量的方式, 称为 pipe 管道;
但是不同于vue的是: vue中必须自定义过滤器, 而 angular 提供了一些 默认的常用过滤器 和 自定义过滤器方式.
官方pipe
创建组件: myc04

ng g c myc04
<p>myc04 works!</p> 
 
<!-- 系统管道 --> 
<ul> 
  <!-- 全大写 uppercase --> 
  <li>{{ "nice to meet you" | uppercase }}</li> 
  <!-- 每个单词首字母大写 titlecase --> 
  <li>{{ "nice to meet you" | titlecase }}</li> 
  <!-- 全小写 --> 
  <li>{{ "NICE To Meet you" | lowercase }}</li> 
  <!-- 百分数 55%--> 
  <li>{{ 0.55555 | percent }}</li> 
  <!-- 通过参数定制 55.56%--> 
  <li>{{ 0.55555 | percent: "2.2" }}</li> 
  <!-- 05.50%  --> 
  <li>{{ 0.055 | percent: "2.2" }}</li> 
 
  <!-- 千进制数字表达 --> 
  <li>{{ 123456.789 | number }}</li> 
  <!-- 钱 --> 
  <li>{{ 1234567.89 | currency }}</li> 
  <li>{{ 1234567.89 | currency: "¥" }}</li> 
 
  <!--  
    日期 
    year   年 y 
    month  月 M 
    day    日 d 
    hour   时 h  12h  24H 
    minute 分 m 
    second 秒 s 
  --> 
  <!-- 时间戳: 当前时间 距离 1970年1月1日 凌晨的秒数 --> 
  <!-- 此处要求 单位ms 毫秒   1秒=1000毫秒 --> 
  <li>{{ 1606717269329 | date }}</li> 
  <li>{{ 1606717269329 | date: "yyyy-MM-dd HH:mm:ss" }}</li> 
  <li>{{ 1606717269329 | date: "y-M-d h:m:s" }}</li> 
</ul> 

自定义管道

类似于 vue, 我们可以自定义管道
vue中:
Vue.filter(过滤器名, 函数名)
共分两步:
• 先制作一个函数
• 注册全局
生成组件:
ng g c myc05
angular的全局管道 也分两步:
• 先制作过滤器函数
• 注册全局
作者提供了简化命令, 使用命令即可直接完成以上步骤
ng generate pipe 管道名

简写: ng g p 管道名

例如, 制作一个计算平方的管道 {{ 9 | pf }}
ng g p pf

自定义指令

<tag 指令 />

指令就是标签的属性, 可以修改标签的属性
在vue中存在自定义指令: Vue.directive(指令名, {指令})
生成组件:

ng g c myc06

生成指令命令:

ng generate directive 指令名 

简化:
ng g d 指令名

掌控子元素
把一个变量 和 组件进行关联: 之后就可以通过变量 控制组件
Vue中有相同的知识点
<组件 ref=“变量” />
使用时: this.refs.变量名 …
关键点:
• 使用 # 为组件设置唯一标识
• 使用 @viewChild('唯一标识') 变量名 事件变量和组件的绑定
生成组件:

ng g c myc07

import { Component, ViewChild } from '@angular/core'; 
import { Myc07Component } from './myc07/myc07.component'; 
 
@Component({ 
  selector: 'app-root', 
  templateUrl: './app.component.html', 
  styleUrls: ['./app.component.css'], 
}) 
export class AppComponent { 
  // 找到 #007 的元素, 关联到 my07 变量 
  // 变量名:类型名  静态类型声明 
  // 告诉vscode 变量的类型, 然后vscode就可以提供对应的提示 
  @ViewChild('007') my07: Myc07Component; 
 
  show() { 
    this.my07.age += 2; 
 
    this.my07.name = this.my07.name.toUpperCase(); 
 
    this.my07.show(); 
  } 
 
  title = 'ngpro'; 
} 
<app-myc07 #007></app-myc07> 
 
<div style="border: 3px gray dashed"> 
  <div>根组件中</div> 
  <button (click)="show()">修改 07 的年龄</button> 
</div>

TypeScript

微软公司 在 JavaScript 基础上开发的 升级版本: 具备其它语言中 的优秀特征!
主要是: 面向对象
浏览器只识别: html, css, JavaScript
要想运行 TS语言, 则需要编译转换: 先安装转换工具

npm i -g typescript

查看已安装版本: tsc -v

父子传参
vue中:

<组件名 name="东东" />

组件中: props: ['name']
生成新的组件:

ng g c myc08

<!-- 父子传参 --> 
<app-myc08 
  name="东东" 
  [age]="18" 
  [desc]="{ gender: 1, boss: '文华', address: '北京市' }" 
></app-myc08> 
<app-myc08 
  name="亮亮" 
  [age]="33" 
  [desc]="{ gender: 1, boss: '文华', address: '山东省.' }" 
></app-myc08> 
import { Component, Input, OnInit } from '@angular/core'; 
 
@Component({ 
  selector: 'app-myc08', 
  templateUrl: './myc08.component.html', 
  styleUrls: ['./myc08.component.css'], 
}) 
export class Myc08Component implements OnInit { 
  // 声明接收外部传参 
  // @Input(): 特殊标识, 代表name属性来自于 外部传入 
  @Input() name: string; 
  @Input() age: number; 
 
  @Input() desc: Describe; 
 
  constructor() {} 
 
  ngOnInit(): void {} 
} 
 
// 自定义类型:  类外书写!!!! 
interface Describe { 
  gender: number; 
  boss: string; 
  address: string; 
} 

回顾

• 动态样式

 	[ngStyle] ="{属性名: 值}"     带有 - 的属性名 写为 小驼峰 或 字符串 
[ngClass] = "{样式名: true/false}"  true生效  false失效

• 条件渲染

*ngIf="条件"

• 列表渲染

*ngFor=“let item of items; let i=index”

没有key
• 管道
{{ xxx | 管道名 }}

自定义管道命令: ng g p 管道名
• 指令
<标签名 指令 />

生成: ng g d 指令名
• TS语言:
静态类型分析功能
• 父子传参