普通组件

主从组件

组件

  1. import {Component, Input, OnInit} from '@angular/core';
  2. import {Hero} from '../hero';
  3. @Component({
  4. selector: 'app-hero-detail',
  5. templateUrl: './hero-detail.component.html',
  6. styleUrls: ['./hero-detail.component.css']
  7. })
  8. export class HeroDetailComponent implements OnInit {
  9. @Input() hero: Hero;
  10. constructor() {
  11. }
  12. ngOnInit() {
  13. }
  14. }

模板

  1. <div *ngIf="hero">
  2. <h2>{{hero.name | uppercase}} Details</h2>
  3. <div><span>id: </span>{{hero.id}}</div>
  4. <div>
  5. <label>name:
  6. <input [(ngModel)]="hero.name" placeholder="name"/>
  7. </label>
  8. </div>
  9. </div>

使用

  1. <app-hero-detail [hero]="selectedHero"></app-hero-detail>
文档更新时间: 2019-04-30 14:27