父子组件的概念是相对的:
准备工作:
首先我们先新建一个项目:
打开命令行,跳转到要建立项目的目录输入:
ng new anguderDemo04
接下来在项目里面创建4个组件:
控制台输入:
ng g component components/footer
ng g component components/header
ng g component components/home
ng g component components/news
一、父组件给子组件传值-@input
父组件不仅可以给子组件传递简单的数据,还可把自己的方法以及整个父组件传给子组件。
1.父组件里面定义数据
home.component.ts
import {
Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit {
public title: string = '首页组件的标题';
public msg: string = '我是父组件的msg';
constructor() {
}
ngOnInit() {
}
run() {
alert('我是父组件的run方法');
}
}
2. 父组件给子组件传递数据
home.component.html
<app-header [title]="title" [msg]="msg" [run]='run' [home]='this'></app-header>
<br>
<br>
<hr>
<br>
<br>
<div>我是首页组件</div>
3. 子组件里面接收数据
header.component.ts
import {
Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css'],
})
export class HeaderComponent implements OnInit {
//接受父组件传来的数据
@Input() title: any;
@Input() msg: any;
//接受父组件传来的方法
@Input() run: any;
//传入整个父组件
@Input() home: any;
constructor() {
}
ngOnInit() {
}
getParentMsg() {
//获取父组件的数据
alert(this.msg);
}
getParentRun() {
//执行父组件的run 方法
// this.run();
alert(this.home.msg);
this.home.run();
}
}
4. 子组件里面使用数据
header.component.html
<header>{
{
title}}--{
{
msg}}</header>
<br>
<button (click)="getParentMsg()">子组件里面获取父组件传入的msg</button>
<br>
<button (click)="getParentRun()">子组件里面执行父组件的run方法</button>
5. 根组件引入父组件
app.component.html
<app-home></app-home>
6. 运行程序
命令行输入:
ng serve --open
运行结果: