前端学习（2332）：angular之组件传值之父传子

child3.html

<p>child3 works!</p>
<app-zizujian [getName]='name'></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},
    ]
  }

}

zizujian.html

<p>zizujian works!</p>
{{getName}}

zizujian.component.ts

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

@Component({
  selector: 'app-zizujian',
  templateUrl: './zizujian.component.html',
  styleUrls: ['./zizujian.component.css']
})
export class ZizujianComponent implements OnInit {
  @Input() getName:string
  constructor() { }

  ngOnInit(): void {
  }

}

运行结果