首页 > 其他分享 >Angular 父组件通过@ViewChild 主动获取子组件的数据和方法

Angular 父组件通过@ViewChild 主动获取子组件的数据和方法

时间:2022-08-29 14:23:41浏览次数:81  
标签:获取 footer msg ViewChild 组件 Angular

链接

1. 父组件中调用子组件

<app-footer #footer></app-footer>

2. 父组件中调用子组件的值
<button (click)="getChildMsg()">获取子组件的msg</button>
@ViewChild('footer') footer: any;


3. 子组件中定义值
public msg = '我是子组件footer的一个msg';
 

标签:获取,footer,msg,ViewChild,组件,Angular
From: https://www.cnblogs.com/jahoon/p/16635795.html

相关文章

  • RN 渐变组件
    官网地址: https://github.com/react-native-linear-gradient1.安装yarnaddreact-native-linear-gradient封装成简单的组件使用importTHButtonfrom'../../comp......
  • Angular+Ionic 禁止手机自带返回返回登录页
    使用场景:手机登录后静止手机自带的返回按钮返回登录页解决方式:使用Angular路由中的路由守卫进入守卫canActivate();默认所有人都可进入路由,当需要限制进入路由时就可......
  • 057_末晨曦Vue技术_处理边界情况之强制更新和创建低开销的静态组件
    强制更新和创建低开销的静态组件点击打开视频讲解更加详细强制更新如果你发现你自己需要在Vue中做一次强制更新,99.9%的情况,是你在某个地方做错了事。你可能还没有留......
  • 内容区滚动组件封装
    iScroll5API中文版观察器温馨提示:让iscroll内容滚动,首先iscroll容器的高度,必须小于内容区的高度没设置内容区的高度就滚动不了了容器的高等于可视区的高度,可视区......
  • 在 React 中释放 Web 组件的力量
    在React中释放Web组件的力量Photoby法提赫on不飞溅假设您有一个项目,要求您在React应用程序中使用Web组件。你如何使用该组件的状态?如何访问它的方法和属......
  • Angular Material实现typeahead简单示例
    前言项目中需要一个输入提示框,之前是使用ng-bootstrap实现的.但是由于系统框架完全迁移到了materialdesign.所以所有bootstrap的依赖项都要迁移到angularmateriald......
  • react组件三大核心属性之一refs
    -ref让react更容易获取dom,和id比较像。只要在dom上定义ref属性,就可以在组件实例的this.refs中获取到对应的dom元素。字符串形式的refs<!DOCTYPEhtml><htmllang="en"......
  • Django入门到放弃之forms组件
    1.介绍1注册功能,登录功能,前端需要校验(字段长度,邮箱是否合法。。。)2前端校验可以没有,后端校验是必须的,使用传统方式if判断写的很多3借助于forms组件,可以快速实现字......
  • 多路由复用页面组件问题
    本文围绕VueRouter中路由组件复用问题展开场景复现项目中经常会遇到增改查的需求,通常采用不同的路由指向同一个页面组件,以此到达复用页面的功能,但是复用页面存在一......
  • 在使用element plus中select组件 关于下拉框位置偏移的解决方法
    造成原因:缩放屏幕时,下拉框会随着屏幕的缩放而偏移解决办法:el-select标签中使用popper-class设置teleported=“false”,再去修改你的样式到正确的位置上<el-select......