When you want to access child component's method, you can use @ViewChild in the parent:

Parent Component:

import {Component, OnInit, ViewChild} from 'angular2/core';
import {HeroService, Hero} from './HeroService';
import {Observable} from 'rxjs/Rx';
import {SelectedHero} from './selected-hero';
import {HeroItem} from './hero-item';
@Component({
selector: 'hero-list',
directives: [SelectedHero, HeroItem],
template: `
<button (click)="removeSelectedHero()">clear</button>
<ul>
<li *ngFor="#hero of heros | async">
<hero-item [hero]="hero" (changed)="thisHero = $event"></hero-item>
</li>
</ul>
<selected-hero [thisHero]="thisHero"></selected-hero>
`
}) export class HeroList implements OnInit{ heros: Observable<Hero[]>;
@ViewChild(SelectedHero) selectedItem: SelectedHero; constructor(public heroService: HeroService){} ngOnInit(){
this.getHeros();
} removeSelectedHero(){
this.selectedItem.clear();
} getHeros(){
this.heros = this.heroService.getHeros();
}
}

Child Component:

import {Component, Input} from 'angular2/core';
import {Hero} from './HeroService';
@Component({
selector: 'selected-hero',
template: `
<h2>{{thisHero && thisHero.name}}</h2>
`
}) export class SelectedHero{ @Input() thisHero: Hero;
constructor(){ } clear(){
this.thisHero = new Hero("");
}
}

[Angular 2] @ViewChild to access Child component's method的更多相关文章

  1. Angular 2 ViewChild & ViewChildren

    一.ViewChild ViewChild 是属性装饰器,用来从模板视图中获取匹配的元素.视图查询在 ngAfterViewInit 钩子函数调用前完成,因此在 ngAfterViewInit 钩子函 ...

  2. e621. Activating a Keystroke When Any Child Component Has Focus

    Normally, a keystroke registered on a component is activated when the component has the focus. This ...

  3. [Vue] Parent and Child component communcation

    By building components, you can extend basic HTML elements and reuse encapsulated code. Most options ...

  4. vue & child component & props

    vue & child component & props vue pass data to child component https://vuejs.org/v2/guide/co ...

  5. [Angular 2] Generate and Render Angular 2 Template Elements in a Component

    Angular 2 Components have templates, but you can also create templates inside of your templates usin ...

  6. [Angular 2] Building a Toggle Button Component

    This lesson shows you how to build a Toggle Button in Angular 2 from scratch. It covers using transc ...

  7. Angular利用@ViewChild在父组件执行子组件的方法

    代码如下: @Component({ selector: 'my-app', template: ` <step-bar #stepBar></step-bar> ` }) e ...

  8. 从flask视角理解angular(二)Blueprint VS Component

    Component类似flask app下面的每个blueprint. import 'rxjs/add/operator/switchMap'; import { Component, OnInit ...

  9. [Angular & Unit Testing] Testing a RouterOutlet component

    The way to test router componet needs a little bit setup, first we need to create a "router-stu ...

随机推荐

  1. redux-simple 简化版的redux

    作为react的粉丝,当然要吐槽一下react组件通信问题.react的单向数据流是组件通信的一大阻碍,只允许父组件向子组件传值,子组件向父组件传值只能通过父组件向子组件传递回调函数实现.如果在深层次 ...

  2. C# string.format转义大括号--转

    转义大括号 左大括号和右大括号被解释为格式项的开始和结束.因此,必须使用转义序列显示文本左大括号或右大括号.在固定文本中指定两个左大括号 ("{{") 以显示一个左大括号 (&qu ...

  3. 13 hbase连接

    Configuration conf=new Configuration(); String zookeeper=""; String clientport="; Str ...

  4. c++模板类被继承时他的成员不能被子类看到

    c++模板类被继承时他的成员不能被子类看到,必须用限定的符号 this->foo  或者 baseclass::foo,或者using bassclass::foo. msvc不提示错误,gcc ...

  5. HashMap工作原理

    hashmap存储的为key-value键值对,get的时间复杂度是O(1),具体实现原理如下: 1. hashmap是基于数组之上,通过一定算法,用空间转换时间 2. hashmap的数据结构为数组 ...

  6. javascript 滚动条下拉导航fixed

    <!doctype html> <html> <style> body{ margin:; padding:; } #top{ background:#; widt ...

  7. [算法导论]贪心算法(greedy algorithm)

    转载请注明出处:http://www.cnblogs.com/StartoverX/p/4611544.html 贪心算法在每一步都做出当时看起来最佳的选择.也就是说,它总是做出局部最优的选择,寄希望 ...

  8. iOS开发——C篇&函数解析

    关于函数,作为一个开发者事必须掌握的知识不管你在那一个领域,所以今天我就来说一说函数. 一:函数的介绍 关于函数,其实笔者在前面都已经演示不少了,其中用的最多的就是main函数,虽然直接说函数可能不太 ...

  9. common常用方法和部分算法

    var commonindex = function() {}; commonindex.prototype = { ajaxRequest: function(request) { $.ajax({ ...

  10. 04 - 替换vtkDataObject中的GetPipelineInformation 和GetExecutive 方法 VTK 6.0 迁移

    VTK6 引入了许多不兼容的变.其中之一是删除vtkDataObject中所有有关管道的方法.其中的两个方法就是GetPipelineInformation() 和 GetExecutive().这些 ...