其他分享
首页 > 其他分享> > Angular中父组件获取子组件的数据、方法by @ViewChild

Angular中父组件获取子组件的数据、方法by @ViewChild

作者:互联网

现有一个父组件app-news,一个子组件app-footer,现在想要在父组件中访问子组件中的数据和方法,实现方案如下。

1.子组件中的定义

定义被访问的变量和方法,完整代码如下:

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

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

  // 将要被父组件访问的变量
  public message:string='这里是footer组件的数据';

  constructor() { }
  ngOnInit(): void {}

  // 将要被父组件访问的方法
  run(){
    console.log('这里是footer组件的方法');
  }
}

2.父组件中的定义:


(1)在Html 模板中增加定义:

<app-footer #footer></app-footer>
<p>这里是新闻组件</p>
<button (click)="getChildData()">获取子组件的数据</button>
<button (click)="getChildMethod()">获取子组件的方法</button>

这里的<app-footer #footer></app-footer> #footer是给子组件起一个名字 

(2)引入ViewChild:

import { ViewChild } from '@angular/core';

(3) 定义绑定变量

@ViewChild("footer") footer:any;

(4)定义模板中需要的方法:
 

  getChildData(){
    console.log('子组件的数据:'+this.footer.message);
  }

  getChildMethod(){
    console.log('子组件的方法');
    this.footer.run();
  }

父组件的完整代码:

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

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

  
  @ViewChild("footer") footer:any;

  constructor() { }

  ngOnInit(): void {
  }

  getChildData(){
    console.log('子组件的数据:'+this.footer.message);
  }

  getChildMethod(){
    console.log('子组件的方法');
    this.footer.run();
  }

}

3.测试

 打开浏览器访问http://127.0.0.1:2400

点击【获取子组件的数据】会在浏览器控制台输出:
子组件的数据:这里是footer组件的数据

点击【获取子组件的方法】会在浏览器控制台输出:

子组件的方法
footer.component.ts:22 这里是footer组件的方法

标签:console,log,footer,component,ViewChild,中父,组件
来源: https://blog.csdn.net/weixin_38296425/article/details/121635515