angular父子通信

angular父子通信，父组件不仅可以给子组件传递简单的数据，还可以吧自己的方法以及整个父组件传给子组件

父组件调用子组件的时候传入数据

<app-header [msg]="msg"></app-header>

子组件引入input模块

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

子组件中 @Input 接受父组件传过来的数据

export class HeaderComponent implements OnInit {
  @Input() title:any
  constructor() { }

  ngOnInit(): void {
  }

}

父组件代码

<p>main works!</p>
<hr>
<app-header [title]="city"></app-header>  定义属性

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

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss']
})
export class MainComponent implements OnInit {
  public city:string = '武汉' // 定义属性值
  constructor() { }

  ngOnInit(): void {
  }

}

子组件代码

<p>我是头部组件{{title}}</p>  我是头部组件武汉

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

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

    ngOnInit(): void {
    }

  }

以上就是angular父子组件传递简单数据