组件

本文以 heroes 组件为例, 组件基本结构如下:

heroes.component.ts

import { Component, OnInit } from '@angular/core';
import { Hero } from '../classes/Hero';
@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
  constructor() { }
  ngOnInit() {
  }
}

classes/Hero

export class Hero {
  id: number;
  name: string;
}

装饰器

  • @Component 是个装饰器函数,用于为该组件指定 Angular 所需的元数据。

CLI 自动生成了三个元数据属性:

  • selector 组件的选择器(CSS 元素选择器)
  • templateUrl 组件模板文件的位置。
  • styleUrls 组件私有 CSS 样式表文件的位置。

其他常用的元数据包括:

  • template 组件的内联模板。如果提供了它,就不要再用 templateUrl 提供模板了。

模板使用

要在模板中使用组件中的一些属性, 可以使用双花括号格式:

app/heros/heroes.component.html

<h1>{{hero.name}}</h1>

要在应用中显示此组件内容, 需要在应用程序根模板中调用该组件:

app/app.component.html

<app-heroes></app-heroes>

组件传值

hero-detail.component.ts, 使用 @Input 接收由另一组件传入的值:

import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../classes/Hero';
@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {
  @Input() hero: Hero;
  constructor() { }
  ngOnInit() {
  }
}

在另一组件 heroes.component.ts 中, 使用如下格式传入数据:

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress