Angular 父组件向子组件传值-详细内容

文章内容

2020/5/23 14:57:02,作者: 黄兵

Angular 父组件向子组件传值

最近有一个需求：在Angular里面，父组件向子组件传值。

子组件代码如下：

component-interaction/src/app/hero-parent.component.ts

import { Component } from '@angular/core';

import { HEROES } from './hero';

@Component({
  selector: 'app-hero-parent',
  template: `
    <h2>{{master}} controls {{heroes.length}} heroes</h2>
    <app-hero-child *ngFor="let hero of heroes"
      [hero]="hero"
      [master]="master">
    </app-hero-child>
  `
})
export class HeroParentComponent {
  heroes = HEROES;
  master = 'Master';
}

父组件代码如下：

component-interaction/src/app/hero-child.component.ts

import { Component, Input } from '@angular/core';

import { Hero } from './hero';

@Component({
  selector: 'app-hero-child',
  template: `
    <h3>{{hero.name}} says:</h3>
    <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
  `
})
export class HeroChildComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string;
}