angular 将父组件的值和方法传给子组件

angular 将父组件的值和方法传给子组件

1、首先，进行Angular环境的搭建和项目创建

ctrl + c 结束服务

2、新建两个模块：home和header

终端输入：

ng g component components/home

ng g component components/header

这里的父组件为home ，子组件为header

①:将父组件添加到app.component.html中

<app-home></app-home>

②:将子组件header添加到home.component.html中

<app-header></app-header>

③：终端输入：ng serve --open 运行程序，结果如下：

3、将父组件的值传给子组件

①：给父组件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 {

  constructor() { }
  ngOnInit(): void {
  }
  public msg:String='我是父组件的msg变量值'; //______________________定义的变量
}

②：在子组件header.component.ts中引入Input装饰器模块，并定义一个变量value，通过Input修饰此变量，来接收父组件传来的数据

import { Component, OnInit,Input } from '@angular/core'; //____________引入Input装饰器模块

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

  constructor() { }
  //修饰value用来接收父组件传来的数据
@Input() value:any; //______________________定义变量value
  ngOnInit(): void {
  }

}

③:home.component.html 中，在子组件中绑定value变量，并传入父组件的值

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

④：header.component.html中，获取value的值

{{value}}

⑤：运行结果如图：

4、将父组件的方法传给子组件

①：父组件home.component.ts中定义一个run()方法

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }
  ngOnInit(): void {
  }
  public msg:String='我是父组件的msg变量值';
  
  //————————————————————————————————————————————————————————定义一个run方法
  run(){
    alert('home组件中的run方法已运行');
  }
}

②：header.components.ts中定义一个任意类型的变量，用Input修饰此变量来接收父组件中的方法

import { Component, OnInit,Input } from '@angular/core'; //_____第一步_______引入Input装饰器模块

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

  constructor() { }
  //修饰value用来接收父组件传来的数据
@Input() value:any; 
//——————————————第二步——————————————————定义一个任意类型的变量，用Input修饰此变量来接收父组件中的方法
@Input() run:any;
ngOnInit(): void {
  }

}

③:父组件home.component.html 中，在子组件中绑定run变量，并传入父组件的值

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

④：子组件header.component.html中定义一个clicked事件，来调用父组件中的run方法

{{value}}
<br>
<button (click)="run()">获取父组件的方法</button>

⑤：运行界面，点击按钮，结果如图：

5、将整个父组件传给子组件

angular中组件调用，除了可以把父组件中的值和方法给子组件调用，还可以直接将父组件传给子组件，让子组件可以调用父组件的所有值和方法，实现过程，都是使用Input装饰器模块。

①：定义一个任意类型的变量，用Input修饰此变量来接收整个父组件

import { Component, OnInit,Input } from '@angular/core'; //____第一步________引入Input装饰器模块

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

  constructor() { }
  //修饰value用来接收父组件传来的数据
@Input() value:any; 
//定义一个任意类型的变量，用Input修饰此变量来接收父组件中的方法
@Input() run:any;
//————————————————————第二步————————————————接收整个组件
@Input() home:any;
ngOnInit(): void {
  }

}

②：home.component.html中传入该父组件

<app-header [value]="msg" [run]="run" [home]="this"></app-header>

③：编辑header.component.html中内容

{{value}}
<br>
<button (click)="run()">获取父组件的方法</button>
<hr>
<h1>以下是获取父组件的值和方法</h1>
<br>
获取父组件的msg值:{{home.msg}}<br>
<button (click)="home.run()">调用父组件的方法</button>

④：运行结果如图：