天天看點

Angular 父元件給子元件傳值

父元件

export class AppComponent {
  title = 'my-App';
  sendchildMsg = '這是給子元素的資料,希望在子元件中顯示';
}      

父元件視圖

<app-child [item]="sendchildMsg"></app-child>      

配置子元件:導入Input,導入item

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
  @Input() item: any;
  constructor() { }

  ngOnInit(): void {
  }

}      
h1>{{item}}</h1>