0
点赞
收藏
分享

微信扫一扫

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

_阿瑶 2022-02-15 阅读 43

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>

④:运行结果如图:
在这里插入图片描述

举报

相关推荐

0 条评论