[Angular 2] @ViewChild to access Child component's method
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的更多相关文章
- Angular 2 ViewChild & ViewChildren
一.ViewChild ViewChild 是属性装饰器,用来从模板视图中获取匹配的元素.视图查询在 ngAfterViewInit 钩子函数调用前完成,因此在 ngAfterViewInit 钩子函 ...
- 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 ...
- [Vue] Parent and Child component communcation
By building components, you can extend basic HTML elements and reuse encapsulated code. Most options ...
- vue & child component & props
vue & child component & props vue pass data to child component https://vuejs.org/v2/guide/co ...
- [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 ...
- [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 ...
- Angular利用@ViewChild在父组件执行子组件的方法
代码如下: @Component({ selector: 'my-app', template: ` <step-bar #stepBar></step-bar> ` }) e ...
- 从flask视角理解angular(二)Blueprint VS Component
Component类似flask app下面的每个blueprint. import 'rxjs/add/operator/switchMap'; import { Component, OnInit ...
- [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 ...
随机推荐
- redux-simple 简化版的redux
作为react的粉丝,当然要吐槽一下react组件通信问题.react的单向数据流是组件通信的一大阻碍,只允许父组件向子组件传值,子组件向父组件传值只能通过父组件向子组件传递回调函数实现.如果在深层次 ...
- C# string.format转义大括号--转
转义大括号 左大括号和右大括号被解释为格式项的开始和结束.因此,必须使用转义序列显示文本左大括号或右大括号.在固定文本中指定两个左大括号 ("{{") 以显示一个左大括号 (&qu ...
- 13 hbase连接
Configuration conf=new Configuration(); String zookeeper=""; String clientport="; Str ...
- c++模板类被继承时他的成员不能被子类看到
c++模板类被继承时他的成员不能被子类看到,必须用限定的符号 this->foo 或者 baseclass::foo,或者using bassclass::foo. msvc不提示错误,gcc ...
- HashMap工作原理
hashmap存储的为key-value键值对,get的时间复杂度是O(1),具体实现原理如下: 1. hashmap是基于数组之上,通过一定算法,用空间转换时间 2. hashmap的数据结构为数组 ...
- javascript 滚动条下拉导航fixed
<!doctype html> <html> <style> body{ margin:; padding:; } #top{ background:#; widt ...
- [算法导论]贪心算法(greedy algorithm)
转载请注明出处:http://www.cnblogs.com/StartoverX/p/4611544.html 贪心算法在每一步都做出当时看起来最佳的选择.也就是说,它总是做出局部最优的选择,寄希望 ...
- iOS开发——C篇&函数解析
关于函数,作为一个开发者事必须掌握的知识不管你在那一个领域,所以今天我就来说一说函数. 一:函数的介绍 关于函数,其实笔者在前面都已经演示不少了,其中用的最多的就是main函数,虽然直接说函数可能不太 ...
- common常用方法和部分算法
var commonindex = function() {}; commonindex.prototype = { ajaxRequest: function(request) { $.ajax({ ...
- 04 - 替换vtkDataObject中的GetPipelineInformation 和GetExecutive 方法 VTK 6.0 迁移
VTK6 引入了许多不兼容的变.其中之一是删除vtkDataObject中所有有关管道的方法.其中的两个方法就是GetPipelineInformation() 和 GetExecutive().这些 ...