Angular学习笔记02(自定义管道,生命周期,掌控子元素,父子传参,子父传参)

在Angular学习笔记01中说到了angular自带的一些管道,接下来我们可以根据需求来自定义一些管道

自定义管道

如下,一般性别后端会返回0和1,当我们需要自定义一个管道,在页面中显示对应的男和女,就可以入如下操作,定义一个gender管道

<p>myc06 works!</p>
<table border="1">
  <tr>
    <td>序号</td>
    <td>姓名</td>
    <td>年龄</td>
    <td>性别</td>
  </tr>
  <tr *ngFor="let item of emps; let i = index">
    <td>{{ i }}</td>
    <td>{{ item.name }}</td>
    <td>{{ item.age }}</td>
    <!-- 
        制作一个gender性别pipe管道
        生成自定义管道命令:ng g p 管道名称

     -->
    <td>{{ item.sex | gender: "en" }}</td>
  </tr>
</table>

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

@Pipe({
  name: 'gender'
})
export class GenderPipe implements PipeTransform {
//{{item.sex | gender :'xxx' }}
// 固定的:管道写法 {{value | 管道名}}
// value就会固定到传递的下方transform方法的参数1中
//参数2:代表语言language,所以缩写lang--程序员自己定义的
//默认值zh通常代表中文, 即默认不传递,则返回中文

  transform(value:number,lang='zh'){
    // 生成管道之后,必须要重启服务器
    console.log(value)
    // 此方法的返回值就会成为管道的处理结果
    if(lang=='zh'){
      if(value==1){
        return '男'
      }else{
        return '女'
      }
    }else{
      if(value==1){
        return 'boy'
      }else{        
        return 'girl'
      }
    }
    }
}

​

生命周期

可以对比vue中的生命周期来进行学习

export class ShengmingzhouqiComponent implements OnInit {
  names = ['诚诚','容容','丁丁']
  constructor() {
    // 面向对象中:类的构造方法
    console.log('constructor:构造方法,组件出生的第一时间触发')
  }

  ngOnInit(): void {
    // 类似于vue中的mounted
    console.log('ngOnInit:组件中的内容初始化触发')
  }
  ngAfterContentInit(): void {
    console.log('ngAfterContentInit:组件中的数据初始化完成时')
  }
  ngAfterViewInit(): void {
    console.log('ngAfterViewInit:组件上的UI界面初始化时')
  }
  ngAfterContentChecked(): void {
    console.log('ngAfterContentChecked:组件上的UI随着数据变化而变化')
  }
  ngOnDestroy(): void {
    console.log('ngOnDestroy:组件销毁时触发')
  }
}

掌控子元素

就是把一个子元素通过#给他一个唯一标识

父组件中的组件：

<app-zhangkongyuansu #zhangkong1></app-zhangkongyuansu>

在父子间ts文件中：

export class AppComponent {
  title = 'angular-test';
  // View查看child孩子
  //@ViewChild('zhangkong1') 查看子组件中叫#zhangkong1的那个
  // TS语言的静态类型:变量名!:类型名
  @ViewChild('zhangkong1') abc!:ZhangkongyuansuComponent;
  change(){
    // 在代码中拿到子组件的索引
    console.log(this.abc.age)
    this.abc.age += 10
    this.abc.show()
  }
}

父子传参

父元素利用子元素属性的写法，传值给子元素

子元素通过声明属性的方式，来接受父元素的参数

<!-- 
  在vue中 ：
  父组件接受参数：props：['name']
-->
<app-fuzichuancan sex="男"></app-fuzichuancan>
<!-- 传递变量 -->
<app-fuzichuancan name="{{ name }}"></app-fuzichuancan>
<!-- 传递数字 -->
<app-fuzichuancan [age]="18"></app-fuzichuancan>

子组件中：

export class FuzichuancanComponent implements OnInit {
  // 接受父组件传递的name
  //@Input():一个标识，告诉组件，这个name属性是外来传入的
  @Input()sex!:string;
  @Input()name!:string;
  @Input()age!:number;
  constructor() { }
  ngOnInit(): void {
  }
}

2.如果父组件传递的是个对象类型

<app-fuzichuancan  [boss]="{ name: '容容', age: 18, sex: '女' }"></app-fuzichuancan>

子组件可以自定义数据类型接收

export class FuzichuancanComponent implements OnInit {
  //自定义数据类型
  @Input()boss!:Boss;
  constructor() { }

  ngOnInit(): void {
  }
}
//自定义数据类型
interface Boss{
  name:string;
  sex:string;
  age:number;
}

子父传参

父组件:

export class AppComponent {
  title = 'angular-test';
  msg = null;
  // 父组件，创建一个方法；
  // 方法：
  show(msg:any){
    console.log('msg:',msg)
    this.msg = msg;
  }
}

<!-- 
  子传父
  1.子元素不能获取父元素的索引
  2.父元素需要通过属性的方式 传递一个方法给子
  3.子元素再通过这个方法来传递信息给父
 -->
<app-zifuchuancan (msgEvent)="show($event)"></app-zifuchuancan>
<h3>喜欢：{{ msg }}</h3>

子组件

<!-- emit():触发 -->
<!-- 触发msgEvent中的函数 -->
<button (click)="msgEvent.emit('诚')">喜欢诚</button>
<button (click)="msgEvent.emit('容容')">喜欢容容</button>

export class ZifuchuancanComponent implements OnInit {
  // 声明外部传入的事件，接受此事件
  //  @Output():外传,
  @Output()msgEvent = new EventEmitter()
  constructor() { }
  ngOnInit(): void {
  }
}