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 運行效果