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

父组件 .ts

<
  td 
   class=
  "iconText"
  >
 
 
appc-deliveryProgress (
  onSelectIcon)=
  "onGridSelected('delivered',od.deliveryId,od.deliveredStatus)" 
  deliveryId=
  "{{od.deliveryId}}" 
  currentNodeStatus=
  "{{od.deliveredStatus}}"></
  appc-deliveryProgress>
 
 
 
</
  td
  >

onGridSelected(phase
  : 
  string, deliveryId
  : 
  string, phaseStatus
  : 
  string) {
 
 
 
this.
  router.
  navigate([
  '/deliveryProgressDashboard/progressDashboardDetail'], { queryParams: { 
  'orderId': 
  deliveryId, 
  'phase': 
  phase, 
  'phaseStatus': 
  phaseStatus
 
 

  }

官方文档：

组件之间的交互

Component Interaction

本烹饪宝典包含了常见的组件通讯场景，也就是让两个或多个组件之间共享信息的方法。

要深入了解组件通讯的各个基本概念，在组件通讯文档中可以找到详细的描述和例子。

参见 在线例子 / 下载范例 。

通过输入型绑定把数据从父组件传到子组件。

HeroChildComponent 有两个输入型属性，它们通常带@Input装饰器。 component-interaction/src/app/hero-child.component.ts

content_copy
 
1. import { Component, Input } from '@angular/core';
2.  
3. import { Hero } from './hero';
4.  
5. @Component({
6.   selector: 'app-hero-child',
7.   template: `
8.     <h3>{{hero.name}} says:</h3>
9.     <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
10.   `
11. })
12. export class HeroChildComponent {
13.   @Input() hero: Hero;
14.   @Input('master') masterName: string;
15. }

@Input为子组件的属性名masterName指定一个别名master(译者注：不推荐为起别名，请参见风格指南).HeroParentComponent把子组件的HeroChildComponent放到*ngFor循环器中，把自己的master字符串属性绑定到子组件的master别名上，并把每个循环的hero实例绑定到子组件的hero属性。 component-interaction/src/app/hero-parent.component.ts

content_copy
 
1. import { Component } from '@angular/core';
2.  
3. import { HEROES } from './hero';
4.  
5. @Component({
6.   selector: 'app-hero-parent',
7.   template: `
8.     <h2>{{master}} controls {{heroes.length}} heroes</h2>
9.     <app-hero-child *ngFor="let hero of heroes"
10.       [hero]="hero"
11.       [master]="master">
12.     </app-hero-child>
13.   `
14. })
15. export class HeroParentComponent {
16.   heroes = HEROES;
17.   master = 'Master';
18. }

运行应用程序会显示三个英雄：