【Angular 学习】第四天：指令、管道以及子父组件传值

一、指令

1、系统指令

1）ngIf(else)

用于判断，可与else配套使用：if-else

html

<h3>成绩:{
   
   {score}}</h3>
<button (click)="score = score + 1">更改成绩</button>
<h4>ngIf不使用else</h4>
<div *ngIf="score< 60">不及格</div>
<div *ngIf="score >= 60">及格</div>
<hr>

<h4>ngIf使用else</h4>
<div *ngIf="score < 60; else templateElse">不及格</div>
<ng-template #templateElse>及格</ng-template>
<hr>

ts

score:number = 59;

效果：

2）ngSwitch(ngSwitchCase)

用于判断：switch-case-default

html

<h3>会员等级:{
   
   {vipNum}}</h3>
<button (click)="vipNum = vipNum + 1">提升等级</button>
<h4>使用ngSwitch</h4>
<div [ngSwitch]="vipNum">
    <p *ngSwitchCase="1">普通会员</p>
    <p *ngSwitchCase="2">白金会员</p>
    <p *ngSwitchCase="3">黄金会员</p>
    <p *ngSwitchDefault>会员等级未知</p>
</div>

ts

vipNum:number = 0;

效果：

3）for循环

html

<h3>for循环</h3>
<ul>
    <li>不带index</li>
    <li *ngFor="let item of [1,2,3]">{
   
   {item}}</li>
</ul>
<ul>
    <li>带index</li>
    <li *ngFor="let item of [1,2,3] let i = index">{
   
   {i}}：{
   
   {item}}</li>
</ul>
<hr>

效果：

2、自定义指令(ng g d xxx)

需求：输入框自动获取焦点

步骤：

1）通过ng g d Focus生成指令文件（会在app文件夹下生成focus.directive.spec.ts和focus.directive.ts）

2）确保Focusdirective指令的模块引入是否正确（哪里要用就在哪个module.ts里引入），然后重启项目

3）编写focus.directive.ts文件进行自定义指令的实现

html

<input type="text" placeholder="自动获取焦点" value="默认值" appFocus>

focus.directive.ts

import {
    
     Directive, ElementRef } from '@angular/core';

@Directive({
    
    
  selector: '[appFocus]'
})
export class FocusDirective {
    
    

  constructor(e: ElementRef) {
    
    
    //获取input节点
    let input = e.nativeElement;
    //更改input的值(模拟异步)
    setTimeout(() => {
    
    
      input.value = '值修改了';
    }, 1000);
    //使input自动获取焦点
    setTimeout(() => {
    
    
      //通过计时器将这个事件最后执行
      e.nativeElement.focus()
    }, 0);
  }
}

效果：

二、管道

1、系统管道

官方文档：Angular - API 列表

html

<h3>常用的管道</h3>
<ul>
    <li>大写：{
   
   {'Dai' | uppercase }}</li>
    <li>小写：{
   
   {'Dai' | lowercase}}</li>
    <li>首字母大写：{
   
   {'My name is dai' | titlecase}}</li>
    <li>百分数：{
   
   {0.33 | percent}}</li>
    <li>百分数的小数位：{
   
   {0.5555 | percent:'2.2'}}</li>
    <li>钱（千位）：{
   
   {213421.321 | currency:'￥'}}</li>
    <li>时间戳转化为时间：{
   
   {time | date }}</li>
    <li>时间戳转化为时间（格式化）：{
   
   {time | date:'yyyy-MM-dd' }}</li>
</ul>

效果：

2、自定义管道(ng g p xxx)

需求：根据数字显示相应的性别

步骤：

1）通过ng g p gender生成指令文件（会在app文件夹下生成gender.pipe.spec.ts和gender.pipe.ts）

2）确保GenderPipe指令的模块引入是否正确（哪里要用就在哪个module.ts里引入），然后重启项目

3）编写gender.pipe.ts文件进行自定义指令的实现

html

<h3>自定义管道</h3>
<table border="1">
    <tr>
        <td>序号</td>
        <td>姓名</td>
        <td>性别</td>
        <td>性别en</td>
    </tr>
    <tr *ngFor="let item of personList; let i = index">
        <td>{
   
   {i}}</td>
        <td>{
   
   {item.name}}</td>
        <td>{
   
   {item.sex | gender}}</td>
        <td>{
   
   {item.sex | gender:'en'}}</td>
    </tr>
</table>

ts

  //人员信息
  personList = [
    {
    
    
      name: 'dai',
      sex: 0
    },
    {
    
    
      name: 'dai2',
      sex: 1
    }
  ]

gender.pipe.ts

import {
    
     Pipe, PipeTransform } from '@angular/core';

@Pipe({
    
    
  name: 'gender'
})
export class GenderPipe implements PipeTransform {
    
    

  transform(value: unknown, ...args: unknown[]): unknown {
    
    
    //对传过来的参数进行判断
    if(args.toString() == 'en'){
    
    
      if (value == 1) return 'Male';
      if (value == 0) return 'Female';
    }
    if (value == 1) return '男';
    if (value == 0) return '女';
    
    else return null
  }
}

效果：

三、子父组件传值

Input（父传子）

父组件：

[属性名]=“xxx”

<login-view [name]="'戴望浩'" [title]="'Hello'"></login-view>

子组件：

ts

@Input(“属性名”) 属性名=默认值

@Input("name") name = "";
@Input("title") title = "";

html

<div class="title">{
   
   {title}}{
   
   {name}}</div>

效果：

Output（子传父）

子组件：

html

<!--设置子组件传参事件-->
<button (click)="login()">登录</button>

ts

//EventEmitter创建一个监听的对象test
@Output("test") test = new EventEmitter();

login() {
    
    
    this.test.emit(设置传递的参数);
}

父组件：

html

<!--$event表示传入的参数-->
<login-view (test)="helloTest($event)"></login-view>

ts

helloTest(e){
    
    
	console.log(e);//子组件传过来的参数
}

ViewChild（获取子组件的内容）

父组件html：要给需要获取的子组件绑定id #productlist

<h3>子组件</h3>
<button (click)="parentClick()">父组件的按钮</button>
<hr>
<app-productlist #productlist></app-productlist>
<app-productlist ></app-productlist>

父组件ts

import {
    
     Component, OnInit, ViewChild } from '@angular/core';
import {
    
     ProductlistComponent } from '../productlist/productlist.component';

@Component({
    
    
  selector: 'app-productinfo',
  templateUrl: './productinfo.component.html',
  styleUrls: ['./productinfo.component.scss']
})
export class ProductinfoComponent implements OnInit {
    
    

  @ViewChild('productlist') productlist: ProductlistComponent = <any>{
    
    };
  constructor() {
    
     }

  ngOnInit(): void {
    
    
  }

  //父组件按钮的事件，修改对应子组件的值
  parentClick() {
    
    
    this.productlist.number ++;
  }
}

子组件html

{
   
   {number}}
<button (click)="change()">子组件的按钮</button>

子组件ts

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

@Component({
    
    
  selector: 'app-productlist',
  templateUrl: './productlist.component.html',
  styleUrls: ['./productlist.component.scss']
})
export class ProductlistComponent implements OnInit {
    
    

  //定义数字
  number: number = 1;
  constructor() {
    
     }

  ngOnInit(): void {
    
    
  }

  //改变子组件的数据
  change() {
    
    
    this.number++;
  }
}

效果：

以上就是指令、管道以及子父组件传值的知识，大家请关注《Angular 学习》专栏。
我会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享，一起进步，加油。