8 父子传参-父向子传递

1 代码结构

 

 2 myc03.component.html

<p>myc03 works!</p>

<h3>name:{{name}}</h3>

<h3>age:{{age}}</h3>

<h3>老板：{{boss?.name}}-{{boss?.age}}-{{boss?.sex}}</h3>

3 myc03.component.ts

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

@Component({
  selector: 'app-myc03',
  templateUrl: './myc03.component.html',
  styleUrls: ['./myc03.component.css']
})
export class Myc03Component implements OnInit {
  //@Input()：一个标识，告诉组件，这个name属性是外来传入的
  @Input() name: string | undefined;

  @Input()
  age!: number;

  @Input() boss: Boss | undefined;

  constructor() { }

  ngOnInit(): void {
  }

}

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

4 app.component.html

<app-myc03 name="张三" [age]="20" [boss]="{name:'赵六',age:18,sex:'男'}"></app-myc03>

<app-myc03 name="李四" [age]="19"></app-myc03>

<app-myc03 name="王五" [age]="18"></app-myc03>

5 运行效果