(精华2020年6月7日更新)Angular基础篇 父组件到子组件传参

父组件html

<div class="content">
    <p>我是home页面</p>

    <app-header 
    [stitle]='title' 
    [category]='category'
    [homeWork] = 'homeWork'
    [homepage]='this'
    ></app-header>
</div>

子组件ts

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

// Input : 接受父组件传给子组件的数据或方法
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.less']
})
export class HeaderComponent implements OnInit {

  // @Input()  
  title: any = '我是header组件'

  @Input('stitle')
  hometitle: any;

  @Input()
  category: any;

  @Input()
  homeWork: any;

  @Input('homepage')
  homepage: any;

  constructor() { }

  ngOnInit(): void {
  }
  headRun() {
    console.log('我是header头部的headRun方法');
  }

  getParentProp() {
    console.log(this.hometitle)
    console.log(this.title)
    console.log('category:', this.category)
  }

  getParentMethod() {
    console.log(this.homeWork)
    this.homeWork();
  }

  getParentComponent() {
    console.log('我是父组件home')
    console.log(this.homepage)
  }

}