基础用法

创建一组组建以后，会生成
css→主要负责样式
html→负责网页显示
ts→负责主要逻辑

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';

//
@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

//定义bean属性
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };

  constructor() { }

  ngOnInit() {
  }

}

//定义实体类
export class Hero {
  id: number;
  name: string;
}

@Component 是个装饰器函数，用于为该组件指定 Angular 所需的元数据
CLI 自动生成了三个元数据属性：
selector— 组件的选择器（CSS 元素选择器）
templateUrl— 组件模板文件的位置。
styleUrls— 组件私有 CSS 样式表文件的位置。

ngOnInit 是一个生命周期钩子，Angular 在创建完组件后很快就会调用 ngOnInit。这里是放置初始化逻辑的好地方。
始终要 export 这个组件类，以便在其它地方（比如 AppModule）导入它。

前端设定

{{hero.name | uppercase}} Details
id: {{hero.id}}

  name:
    
  

把组件绑定在主页面上

{{title}}

双向绑定

  name:
    
  

[(ngModel)] 是 Angular 的双向数据绑定语法。
这里把 hero.name 属性绑定到了 HTML 的 textbox 元素上，以便数据流可以双向流动：从 hero.name 属性流动到 textbox，并且从 textbox 流回到 hero.name 。
缺少 FormsModule
注意，当你加上 [(ngModel)] 之后这个应用无法工作了。

AppModule
Angular 需要知道如何把应用程序的各个部分组合到一起，以及该应用需要哪些其它文件和库。 这些信息被称为元数据（metadata）。

有些元数据位于 @Component 装饰器中，你会把它加到组件类上。 另一些关键性的元数据位于 @NgModule 装饰器中。

最重要的 @NgModule 装饰器位于顶级类 AppModule 上。

Angular CLI 在创建项目的时候就在 src/app/app.module.ts 中生成了一个 AppModule 类。 这里也就是你要添加 FormsModule 的地方。

导入 FormsModule
打开 AppModule (app.module.ts) 并从 @angular/forms 库中导入 FormsModule 符号。
然后把 FormsModule 添加到 @NgModule 元数据的 imports 数组中，这里是该应用所需外部模块的列表。

import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
imports: [
  BrowserModule,
  FormsModule
],

每个组件都必须声明在一个Ngodule中

在 src/app/app.module.ts 中
import { HeroesComponent } from './heroes/heroes.component';
declarations[  AppComponent,  HeroesComponent  ],

数组相关

定义数组

import { Hero } from './hero';

export const HEROES: Hero[] = [
  { id: 11, name: 'Mr. Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }
];

给一个组件添加该数组元素

import { HEROES } from '../mock-heroes';

export class HeroesComponent implements OnInit {
  heroes = HEROES;

前端循环输出

My Heroes

  

//绑定事件，事件方法也在组件ts中编写
    {{hero.id}} {{hero.name}}
  




  
{{selectedHero.name | uppercase}} Details
  
id: {{selectedHero.id}}
  

    name:
      
    
  

主从组件

一个组件依从另外一个组件
从件中导入

import { Hero } from '../hero';
import { Component, OnInit, Input } from '@angular/core';
@Input() hero: Hero;

在主件中显示从件

服务