Angular2.x

Angular版本

Angular1和Angular4分别是Angular的两个版本，也就是Angular1.x和Angular2.x（除了Angular1以外，其余都属于Angular2.x）。

1.Angular1.x ～ Angular2.x

2.Angular2.x有什么变化

1.x

安装Angular CLL

//自从node升级7.x以后，采用@方式进行安装
npm i -g @angular/cli

创建一个新的应用程序

ng new angular-tour-of-heroes

启动应用程序（ng参数使用，请访问这篇文章）

cd angular-tour-of-heroes
ng serve --open

AppComponent组件

app.component.ts - 用TypeScript编写的组件类代码。
app.component.html - 用HTML编写的组件模板。
app.component.css - 组件的私有CSS样式。

2.x

创建heroes组件

组件生成在src目录

ng generate component heroes

执行命令后，会在本app下，生成heroes目录，且目录里存在

heroes.component.html
heroes.component.css
heroes.component.ts

//heroes.component.html

<p>
  heroes works!
</p>

//heroes.component.css

//heroes.component.ts
import { Component, OnInit } from ‘@angular/core‘;

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

  constructor() { }

  ngOnInit() {
  }

}

您始终Component从Angular核心库中导入符号并使用注释组件类。@Component

@Component 是指定组件的Angular元数据的装饰器函数。

CLI生成了三个元数据属性：

1. selector - 组件的CSS元素选择器
2. templateUrl - 组件模板文件的位置。
3. styleUrls - 组件的私有CSS样式的位置。

在CSS元素选择， ‘app-heroes‘是相匹配的标识父组件模板内此组件的HTML元素的名称。

这ngOnInit是一个生命周期钩子 Angular ngOnInit在创建组件后立即调用。这是放置初始化逻辑的地方。

总是export组件类，所以你可以import在其他地方...像在AppModule。

详情查询：

Component

生命周期钩子

添加hero属性到HeroesComponent，然后再用html模板文件再显示出来。

显示HeroesComponent视图，必须添加到shell（AppComponent）模板中

3.x

创建一个heroes类

Hero在文件src/app夹中的文件中创建一个类。给它id和name属性。

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

然后返回到HeroesComponent导入hero.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 {
  hero: Hero = {
    id: 1,
    name: ‘Windstorm‘
  };

  constructor() { }

  ngOnInit() {
  }

}

原文地址：https://www.cnblogs.com/cisum/p/8523808.html