前端學習（2333）：angular之元件傳值之子傳父

child3.html

<p>child3 works!</p>
<app-zizujian [getName]='name' (b)="fu($event)"></app-zizujian>

child3.component.ts

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

@Component({
  selector: 'app-child3',
  templateUrl: './child3.component.html',
  styleUrls: ['./child3.component.css']
})
export class Child3Component implements OnInit {
name:string;
age:number;
liList:any[];
  constructor() { }

  ngOnInit(): void {
    this.name="zhansan";
    this.age=18;
    this.liList=[
      {uName:"lisi1",uAge:10},
      {uName:"lisi2",uAge:30},
      {uName:"lisi3",uAge:20},
    ]
  }
  fu(event){
    console.log("子元件你好"+event)
  }

}

zizujian.html

<p>zizujian works!</p>
{{getName}}
<a href="javascript:" (click)="hello()">子元件</a>

zizujian.component.ts

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

@Component({
  selector: 'app-zizujian',
  templateUrl: './zizujian.component.html',
  styleUrls: ['./zizujian.component.css']
})
export class ZizujianComponent implements OnInit {
  @Input() getName:string
  @Output() b=new EventEmitter<any>()
  constructor() { }

  ngOnInit(): void {
  }
hello(){
    this.b.emit("父元件你好")
}
}

執行結果