代码如下:

@Component({
selector: 'my-app',
template: `
<step-bar #stepBar></step-bar>
`
})
export class AppComponent{
//利用模板变量stepBar获取子组件的引用
@ViewChild('stepBar') stepBar: StepBarComponent;
//执行子组件的init方法(需要在AfterViewInit钩子后执行)
ngAfterViewInit() {
this.stepBar.init();
}
}

Angular利用@ViewChild在父组件执行子组件的方法的更多相关文章

  1. 父组件调用子组件 viewChild

    父组件调用子组件 1.在子组件的ts中声明一个变量 public  lineout:any="你好,我是被父组件调用的子组件";  2.在父组件的html中写入 (引入子组件) & ...

  2. vue中的父组件及子组件生命周期的执行顺序

    一.没有任何任何显示与隐藏限制条件的情况下: 1.运行的顺序依次是: 父组件created→父组件beforeMounted→子组件created→子组件beforeMounted→子组件mounte ...

  3. angular中父组件给子组件传值-@input

    1. 父组件调用子组件的时候传入数据 <app-header [msg]="msg"></app-header> 2. 子组件引入 Input 模块 imp ...

  4. vue中使用ts后,父组件获取执行子组件方法报错问题

    一.问题产生背景: 子组件的一个方法: update () { this.$nextTick(() => { this.ul_slots.forEach((ul, cur_slots_index ...

  5. Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?

    原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...

  6. React中父组件与子组件之间的数据传递和标准化的思考

    React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...

  7. vue学习之父组件与子组件之间的交互

    1.父组件数据传给子组件 父组件中的msgfather定义数据 在之组件中通过设置props来取得希望从父组件中获得的值 通过设置这两个属性就可以从父组件传数据到子组件 2.子组件传数据给父组件(这里 ...

  8. VUE 父组件与子组件交互

    1. 概述 1.1 说明 在项目过程中,会有很多重复功能在多个页面中处理,此时则需要把这些重复的功能进行单独拎出,编写公用组件(控件)进行引用.在VUE中,组件是可复用的VUE实例,此时组件中的dat ...

  9. vue 父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件

    Home.vue <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> <v-header ...

随机推荐

  1. 2017-06-23(chmod whoami chown)

    文件权限设定 chmod u-x newfile chmod u-x,g+w newfile chmod a=rwx newfile [mode=421] r = 4 , w=2, x=1 chmod ...

  2. Spring+JTA+Atomikos+mybatis分布式事务管理

    我们平时的工作中用到的Spring事务管理是管理一个数据源的.但是如果对多个数据源进行事务管理该怎么办呢?我们可以用JTA和Atomikos结合Spring来实现一个分布式事务管理的功能.了解JTA可 ...

  3. 记一些安卓app反编译修改的记录

    2017-12-2209:00:40 好几天没有写过博客了,因为马上要期末考试,只能暂且放下我的小玩物,专心复习我的期末考试. 今天突然想设置一个安卓的栏目,记录下自己从高中就爱玩的一些东西,像刷机呀 ...

  4. js_11_dom其他

    有哪些其他js? window.location.href = "跳转页面"      //   不写获得本页面url,写跳转到指定页面 confirm('内容')     // ...

  5. Android: 工具使用备忘

    Gradle Gradle本地路径设置 如果在AndroidStudio内设置了使用local的Gradle路径,就直接放那边,啥问题都不会有.如果使用推荐的设置,那么更新的时候很有可能会有问题. 在 ...

  6. mysql数据库安装注意事项:

    mysql数据库安装注意事项: https://jingyan.baidu.com/article/642c9d34aa809a644a46f717.html(安装教程) 注意语言设置为gbk可以解决 ...

  7. android 中的ExpandableListView取消一级图标

    mainlistview = (ExpandableListView) view.findViewById(R.id.listview_myteacher); mainlistview.setGrou ...

  8. Ocelot 集成Butterfly 实现分布式跟踪

    微服务,通常都是用复杂的.大规模分布式集群来实现的.微服务构建在不同的软件模块上,这些软件模块,有可能是由不同的团队开发.可能使用不同的编程语言来实现.有可能布在了几千台服务器,横跨多个不同的数据中心 ...

  9. spring之p命名空间注入

    <bean id="personId" class="com.itheima.f_xml.c_p.Person" p:pname="禹太璞&qu ...

  10. 获取sap登陆用户名的中文描述

    一.业务场景: 当通过MKPF-USNAM查找ADRP-NAME_LAST时,中间缺少一个表,即USR21.否则,MKPF-USNAM不能和ADRP-PERSNUMBER直接对等. 二.解决方法: D ...