Angular4_组件之间传值
子组件html
< a * ngIf= "currentNodeStatus !== '0'" ( click)= "navigateDetail(deliveryId,currentNodeStatus,nextNodeStatus)" style= " cursor:pointer;" > < img src= "{{imgUrl}}" width= "32px" > a > 子组件 .ts @ Output() onSelectIcon = new EventEmitter< any>(); @ Input() deliveryId : string; @ Input() currentNodeStatus : string; @ Input() nextNodeStatus : string;父组件 html
< td class= "iconText" > < appc-deliveryProgress ( onSelectIcon)= "onGridSelected('delivered',od.deliveryId,od.deliveredStatus)" deliveryId= "{{od.deliveryId}}" currentNodeStatus= "{{od.deliveredStatus}}">appc-deliveryProgress> td >父组件 .ts
onGridSelected(phase : string, deliveryId : string, phaseStatus : string) { this. router. navigate([ '/deliveryProgressDashboard/progressDashboardDetail'], { queryParams: { 'orderId': deliveryId, 'phase': phase, 'phaseStatus': phaseStatus } }); }
官方文档：
组件之间的交互
Component Interaction
要深入了解组件通讯的各个基本概念，在组件通讯文档中可以找到详细的描述和例子。
通过输入型绑定把数据从父组件传到子组件。
- import { Component, Input } from '@angular/core';
- import { Hero } from './hero';
- @Component({
- selector: 'app-hero-child',
- template: `
{{hero.name}} says:
I, {{hero.name}}, am at your service, {{masterName}}.
- `
- })
- export class HeroChildComponent {
- @Input() hero: Hero;
- @Input('master') masterName: string;
- }
- import { Component } from '@angular/core';
- import { HEROES } from './hero';
- @Component({
- selector: 'app-hero-parent',
- template: `
{{master}} controls {{heroes.length}} heroes
- [hero]="hero"
- [master]="master">
- `
- })
- export class HeroParentComponent {
- heroes = HEROES;
- master = 'Master';
- }
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！