(精华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)}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！