# angular-tour-of-heroes

**Repository Path**: program_bell/angular-tour-of-heroes

## Basic Information

- **Project Name**: angular-tour-of-heroes
- **Description**: angular6.0学习项目
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-07-09
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AngularTourOfHeroes

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.8.
####步骤 1. 设置开发环境
请先在终端/控制台窗口中运行命令 node -v 和 npm -v， 来验证一下你正在运行 node 8.x 和 npm 5.x 以上的版本。 更老的版本可能会出现错误，更新的版本则没问题。   
然后全局安装 Angular CLI。   
```angularjs
npm install -g @angular/cli
```
####步骤 2. 创建新项目
```angularjs
ng new angular-tour-of-heroes
```
####步骤 3. 创建新component
```angularjs
ng generate component hero-detail
```
####步骤 4. 创建新service
```angularjs
ng generate service hero
```
####步骤 4. 创建router
```angularjs
ng generate module app-routing --flag --module=app
```
####步骤 4. 创建class
```angularjs
ng generate class hero
```
--flat 把这个文件放进了 src/app 中，而不是单独的目录中。   
--module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中。   

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

## 注意问题点
1、你不能把 [(ngModel)] 用到非表单类的原生元素或第三方自定义组件上，除非写一个合适的值访问器   
2、?.是angular模板中的安全属性操作符语法，属于angular模板特有语法。a?.b表示当a存在时(不为null或undefined)，取a.b的值，否则置空；以避免出现a未赋值时直接报错
3、组件间的值（对象）和事件传递
```java
在app-component.html中定义的：
<app-hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
在hero-detail.component.ts中定义：
import { Component, EventEmitter, Input, Output } from '@angular/core';

export class BigHeroDetailComponent extends HeroDetailComponent {

  @Input()  hero: Hero;
  @Output() deleteRequest = new EventEmitter<Hero>();

  delete() {
    //这里会有一个弹框效果
    this.deleteRequest.emit(this.hero);
  }
}

```
4、非空断言操作符（!）   
```java
<div *ngIf="hero">
  The hero's name is {{hero!.name}}
</div>
```
在 Angular 编译器把你的模板转换成 TypeScript 代码时，这个操作符会防止 TypeScript 报告 "hero.name 可能为 null 或 undefined"的错误。   
5、类型转换函数 $any （$any( <表达式> )）
```java
有时候，绑定表达式可能会报类型错误，并且它不能或很难指定类型。要消除这种报错，你可以使用 $any 转换函数来把表达式转换成 any 类型。
<div>
  The hero's marker is {{$any(hero).marker}}
</div>
$any 转换函数可以和 this 联合使用，以便访问组件中未声明过的成员。
<div>
  Undeclared members is {{$any(this).member}}
</div>
```
6、生命周期的顺序
钩子  | 用途及时机
------------- | -------------
ngOnChanges()  |  当 Angular（重新）设置数据绑定输入属性时响应。 该方法接受当前和上一属性值的 SimpleChanges 对象当被绑定的输入属性的值发生变化时调用，首次调用一定会发生在 ngOnInit() 之前。
 ngOnInit()|在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。在第一轮 ngOnChanges() 完成之后调用，只调用一次。
ngDoCheck()|检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应。在每个 Angular 变更检测周期中调用，ngOnChanges() 和 ngOnInit() 之后。
ngAfterContentInit()|当把内容投影进组件之后调用。第一次 ngDoCheck() 之后调用，只调用一次。
ngAfterContentChecked() | 每次完成被投影组件内容的变更检测之后调用。ngAfterContentInit() 和每次 ngDoCheck() 之后调用
ngAfterViewInit()|初始化完组件视图及其子视图之后调用。第一次 ngAfterContentChecked() 之后调用，只调用一次。
ngAfterViewChecked()|每次做完组件视图和子视图的变更检测之后调用。ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。
ngOnDestroy()|当 Angular 每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏。在 Angular 销毁指令/组件之前调用。