angular入门

湘水渔叟 發表於 2019-7-22 13:05:00

<div>
<h1>一、Angular 介绍</h1>
<blockquote>
<code>Angualr</code> 是一款来自谷歌的开源的 <code>web</code> 前端框架，诞生于 <code>2009</code> 年，由 <code>Misko Hevery</code> 等人创建，后为 <code>Google</code> 所收购。是一款优秀的前端 <code>JS</code> 框架，已经被用于 <code>Google</code> 的多款产品当中。
</blockquote>
<ul>
<li>根据项目数统计 <code>angular(1.x 、2.x 、4.x、5.x、6.x、7.x)</code>是现在网上使用量最大的框架</li>
<li><code>Angualr</code> 基于 <code>TypeScript</code> 和 <code>react</code>、<code>vue</code> 相比, <code>Angular</code> 更适合中大型企业级项目。</li>
</ul>
<blockquote>
目前 2018 年 11 月 25 日 <code>angular</code> 最新版本 <code>angular7.x</code>。根据官方介绍，<code>Angular</code> 每过几个月就会更新一个版本。此教程同样适用于后期更新的 <code>Angular8.x</code>、<code>Angular9.x</code>
</blockquote>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="1288" data-height="598"><img src="//upload-images.jianshu.io/upload_images/1480597-981a84fee307935b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp"></div>
</div>
<div class="image-caption">image.png</div>
</div>
学习 Angular 必备基础
<blockquote>
必备基础:<code>html</code> 、<code>css</code> 、<code>js</code>、<code>es6</code>、<code>Typescript</code>
</blockquote>
<h1>二、Angular 环境搭建及创建项目</h1>
<h2>2.1 环境搭建</h2>
1. 安装 nodejs
<blockquote>
安装 <code>angular</code> 的计算机上面必须安装最新的 <code>nodejs</code>--注意安装 <code>nodejs</code> 稳定版本
</blockquote>
2. 安装 cnpm
<blockquote>
npm 可能安装失败建议先用 <code>npm</code> 安装一下 <code>cnpm</code> 用淘宝镜像安装<code>https://npm.taobao.org</code>
</blockquote>
<pre class="hljs bash"><code class="bash">npm install -g cnpm --registry=https://registry.npm.taobao.org
</code></pre>
3. 使用 npm/cnpm 命令安装 angular/cli
<pre class="hljs bash"><code class="bash">npm install -g @angular/cli

# 或者
cnpm install -g @angular/cli
</code></pre>
<blockquote>
<code>ng v</code> 查看版本信息
</blockquote>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="1352" data-height="1080"><img src="//upload-images.jianshu.io/upload_images/1480597-03bfdfb5fbe33072.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp"></div>
</div>
<div class="image-caption">angular cli</div>
</div>
4. 安装插件
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="1322" data-height="766"><img src="//upload-images.jianshu.io/upload_images/1480597-2bdda6e300581705.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp"></div>
</div>
<div class="image-caption">image.png</div>
</div>
5. 安装chrome扩展
<blockquote>
https://augury.angular.io/
</blockquote>
<blockquote>
用<code>augury</code>查看<code>component</code>结构，更方便调试
</blockquote>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="2872" data-height="1304"><img src="//upload-images.jianshu.io/upload_images/1480597-0deeca08d9802b29.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp"></div>
</div>
<div class="image-caption">image.png</div>
</div>
<h2>2.2 创建项目</h2>
<pre class="hljs bash"><code class="bash"># 创建项目
ng new my-app

cd my-app

# 运行项目
ng serve --open
</code></pre>
<h2>2.3 目录结构分析</h2>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="1696" data-height="1000"><img src="//upload-images.jianshu.io/upload_images/1480597-2cb7c7aa06aa3e2d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp"></div>
</div>
<div class="image-caption">image.png</div>
</div>
<blockquote>
详情参考 https://www.angular.cn/guide/file-structure
</blockquote>
app目录（重点）
<blockquote>
<code>app</code>目录是我们要编写的代码目录。我们写的代码都是放在这个目录。 
一个<code>Angular</code>程序至少需要一个模块和一个组件。在我们新建项目的时候命令行已经默认生成出来了

</blockquote>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="301" data-height="151"><img src="//upload-images.jianshu.io/upload_images/1480597-7a8a287d49ec4026.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/301/format/webp"></div>

</div>
<div class="image-caption">image.png</div>

</div>
<ul>
<li>
<code>app.component.ts</code>：这个文件表示组件，</li>
<li>组件是<code>Angular</code>应用的基本构建模块，可以理解为一段带有业务逻辑和数据的<code>Html</code> 
我们来看看<code>app.component.ts</code>中的代码，并解释下代码的意义</li>

</ul>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="2562" data-height="1154"><img src="//upload-images.jianshu.io/upload_images/1480597-222e69dfde39a005.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp"></div>

</div>
<div class="image-caption">app.component.ts</div>

</div>
<pre class="hljs javascript"><code class="javascript">/*这里是从Angular核心模块里面引入了component装饰器*/
import {Component} from '@angular/core';

/*用装饰器定义了一个组件以及组件的元数据所有的组件都必须使用这个装饰器来注解*/
@Component({
/*组件元数据Angular会通过这里面的属性来渲染组件并执行逻辑
* selector就是css选择器，表示这个组件可以通过app-root来调用，index.html中有个<app-root>Loading...</app-root>标签，这个标签用来展示该组件的内容
*templateUrl组件的模板，定义了组件的布局和内容
*styleUrls 该模板引用那个css样式
* */
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
/*AppComponent本来就是一个普通的typescript类，但是上面的组件元数据装饰器告诉Angular，AppComponent是一个组件，需要把一些元数据附加到这个类上，Angular就会把AppComponent当组件来处理*/
export class AppComponent {
/*这个类实际上就是该组件的控制器，我们的业务逻辑就是在这个类中编写*/
title = '学习Angular';
}
</code></pre>
组件相关的概念
<ol>
<li>组件元数据装饰器（<code>@Component</code>） 
简称组件装饰器，用来告知<code>Angular</code>框架如何处理一个<code>TypeScript</code>类. 
<code>Component</code>装饰器包含多个属性，这些属性的值叫做元数据，<code>Angular</code>会根据这些元数据的值来渲染组件并执行组件的逻辑</li>
<li>模板（<code>Template</code>） 
我们可以通过组件自带的模板来定义组件的外观，模板以<code>html</code>的形式存在，告诉<code>Angular</code>如何来渲染组件，一般来说，模板看起来很像<code>html</code>，但是我们可以在模板中使用<code>Angular</code>的数据绑定语法，来呈现控制器中的数据。</li>
<li>控制器（<code>controller</code>） 
控制器就是一个普通的<code>typescript</code>类，他会被<code>@Component</code>来装饰，控制器会包含组件所有的属性和方法，绝大多数的业务逻辑都是写在控制器里的。控制器通过数据绑定与模板来通讯，模板展现控制器的数据，控制器处理模板上发生的事件。</li>

</ol>
装饰器，模板和控制器是组件的必备要素。还有一些可选的元素，比如：
<ul>
<li>输入属性（<code>@inputs</code>）:是用来接收外部传入的数据的,<code>Angular</code>的程序结构就是一个组件树，输入属性允许在组件树种传递数据 
提供器（<code>providers</code>）：这个是用来做依赖注入的</li>
<li>生命周期钩子（<code>LifeCycle Hooks</code>）：一个组件从创建到销毁的过程中会有多个钩子会被触发，类似于Android中的<code>Activity</code>的生命周期</li>
<li>样式表：组件可以关联一些样式表</li>
<li>动画（<code>Animations</code>）： <code>Angular</code>提供了一个动画包来帮助我们方便的创建一些跟组件相关的动画效果，比如淡入淡出等</li>
<li>输出属性（<code>@Outputs</code>）：用来定义一些其他组件可能需要的事件或者用来在组件之间共享数据</li>

</ul>
<blockquote>
组件的中关系就如下图所示

</blockquote>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="1200" data-height="496"><img src="//upload-images.jianshu.io/upload_images/1480597-7223faf5cf1f3922.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp"></div>

</div>
<div class="image-caption">image.png</div>

</div>
下面我们来看看模块文件
<ul>
<li>
<code>app.module.ts</code>：这个文件表示模块</li>
<li>与<code>AppComponent</code>类似，模块也需要装饰器来装饰</li>

</ul>
<pre class="hljs javascript"><code class="javascript">import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';

@NgModule({
declarations: [
// 声明模块里有什么东西只能声明：组件/指令/管道
AppComponent,
HeroesComponent
],
// 声明该模块所依赖的模块
imports: [
BrowserModule,
AppRoutingModule
],
// 默认情况下是空的
providers: [],
// 声明模块的主组件是什么
bootstrap:
})
export class AppModule { }
</code></pre>
<h2>2.4 Angular cli</h2>
<blockquote>
https://cli.angular.io
</blockquote>
<blockquote>
通过<code>ng g</code>列出当前命令
</blockquote>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="1428" data-height="1550"><img src="//upload-images.jianshu.io/upload_images/1480597-77b3c17abd045ecd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp"></div>
</div>
<div class="image-caption">ng g</div>
</div>
1. 创建新组件 <code>ng generate component component-name</code>
<blockquote>
<code>ng g component components/header</code> 指定生成到哪个目录
</blockquote>
该命令会把生成的组件，添加到 <code>src/app/app.module.ts</code> 文件中 <code>@NgModule</code> 的 <code>declarations</code> 列表中声明
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="1904" data-height="1124"><img src="//upload-images.jianshu.io/upload_images/1480597-5b49e4ebc275a90e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp"></div>
</div>
<div class="image-caption">image.png</div>
</div>
2. 使用 Angular CLI 创建一个名叫 hero 的服务
<pre class="hljs undefined"><code>ng generate service hero
</code></pre>
<blockquote>
该命令会在 <code>src/app/hero.service.ts</code> 中生成 <code>HeroService</code> 类的骨架。 <code>HeroService</code> 类的代码如下：
</blockquote>
<pre class="hljs javascript"><code class="javascript">import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root',
})
export class HeroService {

constructor() { }

}
</code></pre>
3. 添加 AppRoutingModule
<pre class="hljs cpp"><code class="cpp">ng generate module app-routing --flat --module=app
</code></pre>
<ul>
<li><code>--flat</code> 把这个文件放进了 <code>src/app</code> 中，而不是单独的目录中。</li>
<li><code>--module=app</code> 告诉 <code>CLI</code> 把它注册到 <code>AppModule</code>的 <code>imports</code> 数组中。</li>
</ul>
生成的文件是这样的：
<pre class="hljs javascript"><code class="javascript">src/app/app-routing.module.ts (generated)
content_copy
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
imports: [
CommonModule
],
declarations: []
})
export class AppRoutingModule { }
</code></pre>
修改后
<pre class="hljs javascript"><code class="javascript">import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({
imports: ,
exports:
})
export class AppRoutingModule { }
</code></pre>
<h1>三、angular组件及组件里的模板</h1>
<h2>3.1 创建angualr组件</h2>
1. 创建组件
<pre class="hljs bash"><code class="bash">ng g component components/header
</code></pre>
2. 使用组件
<pre class="hljs xml"><code class="xml"><app-header></app-header>
</code></pre>
<h2>3.2 Angular 绑定数据</h2>
1. 数据文本绑定
<blockquote>
定义数据几种方式
</blockquote>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="810" data-height="920"><img src="//upload-images.jianshu.io/upload_images/1480597-78d5b2e181f0c2ce.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/810/format/webp"></div>
</div>
<div class="image-caption">定义数据几种方式</div>
</div>
<pre class="hljs xml"><code class="xml"><h1>{{title}}</h1>
</code></pre>
2. 绑定<code>HTML</code>
<pre class="hljs cpp"><code class="cpp"> this.h="<h2>这是一个 h2 用来解析</h2>"
</code></pre>
<pre class="hljs javascript"><code class="javascript"> <div ="h"></div>
</code></pre>
<h2>3.3 声明属性的几种方式</h2>
<ul>
<li><code>public</code> 共有（默认）可以在类里外使用</li>
<li><code>protected</code> 保护类型只能在当前类和子类中使用</li>
<li><code>private</code> 私有类型只能在当期类使用</li>
</ul>
<h2>3.4 绑定属性</h2>
<blockquote>
用<code>[]</code>包裹
</blockquote>
<pre class="hljs xml"><code class="xml"> <div [id]="id" [title]="msg">调试工具看看我的属性</div>
</code></pre>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="1488" data-height="194"><img src="//upload-images.jianshu.io/upload_images/1480597-305cca1bb2c88059.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp"></div>
</div>
<div class="image-caption">image.png</div>
</div>
<h2>3.5 数据循环 *ngFor</h2>
*1. ngFor 普通循环
<pre class="hljs javascript"><code class="javascript">export class HomeComponent implements OnInit {

arr = [{ name: 'poetries', age: 22 }, { name: 'jing' , age: 31}];
constructor() { }

ngOnInit() {
}

}
</code></pre>
<pre class="hljs xml"><code class="xml"><ul *ngIf="arr.length>0">
 <li *ngFor="let item of arr">{{item.name}}- {{item.age}}</li>
</ul>
</code></pre>
2. 循环的时候设置 key
<pre class="hljs xml"><code class="xml"><ul>
<li *ngFor="let item of list;let i = index;"> 
{{item}} --{{i}}
</li> </ul>
</code></pre>
3. template 循环数据
<pre class="hljs xml"><code class="xml"><ul>
<li template="ngFor let item of list">
{{item}}
</li> </ul>
</code></pre>
<h2>3.6 条件判断 *ngIf</h2>
<pre class="hljs xml"><code class="xml"><p *ngIf="list.length > 3">这是 ngIF 判断是否显示</p>

<p template="ngIf list.length > 3">这是 ngIF 判断是否显示</p>
</code></pre>
<h2>3.7 *ngSwitch</h2>
<pre class="hljs xml"><code class="xml"><ul [ngSwitch]="score">
<li *ngSwitchCase="1">已支付</li>
<li *ngSwitchCase="2">订单已经确认</li> <li *ngSwitchCase="3">已发货</li>
<li *ngSwitchDefault>无效</li>
</ul>
</code></pre>
<h2>3.8 执行事件 (click)=”getData()”</h2>
<pre class="hljs xml"><code class="xml"><button class="button" (click)="getData()"> 点击按钮触发事件
</button>
<button class="button" (click)="setData()"> 点击按钮设置数据
</button>
</code></pre>
<pre class="hljs java"><code class="java">getData(){ /*自定义方法获取数据*/ //获取
alert(this.msg);
}
setData(){
//设置值
this.msg='这是设置的值';
}
</code></pre>
<h2>3.9 表单事件</h2>
<pre class="hljs bash"><code class="bash"><input
type="text"
(keyup)="keyUpFn($event)"/>

<input type="text" (keyup)="keyUpFn($event)"/>
</code></pre>
<pre class="hljs cpp"><code class="cpp">keyUpFn(e){
console.log(e)
}
</code></pre>
<h2>3.10 双向数据绑定</h2>
<pre class="hljs xml"><code class="xml"><input [(ngModel)]="inputVal">
</code></pre>
<blockquote>
注意引入:<code>FormsModule</code>
</blockquote>
<pre class="hljs javascript"><code class="javascript">import {FormsModule} from '@angular/forms'

NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
NewsComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap:
})
export class AppModule { }
</code></pre>
<pre class="hljs xml"><code class="xml">
<input type="text" [(ngModel)]="inputValue"/> {{inputValue}}
</code></pre>
<h2>3. 11 、</h2>
1. :
<pre class="hljs xml"><code class="xml"><div [ngClass]="{'red': true, 'blue': false}">
这是一个 div
</div>
</code></pre>
<pre class="hljs cpp"><code class="cpp">public flag=false;
</code></pre>
<pre class="hljs xml"><code class="xml"><div [ngClass]="{'red': flag, 'blue': !flag}">
这是一个 div </div>
</code></pre>
<pre class="hljs cpp"><code class="cpp">public arr = [1, 3, 4, 5, 6];
</code></pre>
<pre class="hljs xml"><code class="xml"><ul>
<li *ngFor="let item of arr, let i = index"> <span [ngClass]="{'red': i==0}">{{item}}</span>
</li> </ul>
</code></pre>
2. :
<pre class="hljs xml"><code class="xml"><div [ngStyle]="{'background-color':'green'}">你好 ngStyle</div>
</code></pre>
<pre class="hljs java"><code class="java">public attr='red';
</code></pre>
<pre class="hljs xml"><code class="xml"><div [ngStyle]="{'background-color':attr}">你好 ngStyle</div>
</code></pre>
<h2>3.12 管道</h2>
<pre class="hljs cpp"><code class="cpp"> public today=new Date();
</code></pre>
<pre class="hljs xml"><code class="xml"> <p>{{today | date:'yyyy-MM-dd HH:mm:ss' }}</p>
</code></pre>
其他管道
<blockquote>
<code>angular</code>中的管道(<code>pipe</code>)是用来对输入的数据进行处理，如大小写转换、数值和日期格式化等
</blockquote>
<blockquote>
<code>angular</code>中的管道(<code>pipe</code>) 以及自定义管道适用于<code>angular4 angualr5 angualr6 angular7</code>
</blockquote>
常用的管道（<code>pipe</code>）有
1. 大小写转换
<pre class="hljs xml"><code class="xml">
<p>{{str | uppercase}}</p>


<p>{{str | lowercase}}</p>
</code></pre>
2. 日期格式转换
<pre class="hljs xml"><code class="xml"><p>
{{today | date:'yyyy-MM-dd HH:mm:ss' }}
</p>
</code></pre>
3. 小数位数
<blockquote>
接收的参数格式为<code>{最少整数位数}.{最少小数位数}-{最多小数位数}</code>
</blockquote>
<pre class="hljs xml"><code class="xml">

<p>{{p | number:'1.2-4'}}</p>
</code></pre>
4. JavaScript 对象序列化
<pre class="hljs xml"><code class="xml"><p>
{{ { name: 'semlinker' } | json }}
</p>

</code></pre>
5. slice
<pre class="hljs xml"><code class="xml"><p>{{ 'semlinker' | slice:0:3 }}</p>

</code></pre>
6. 管道链
<pre class="hljs xml"><code class="xml"><p>
{{ 'semlinker' | slice:0:3 | uppercase }}
</p>


</code></pre>
7. 自定义管道
自定义管道的步骤：
<ul>
<li>使用 <code>@Pipe</code> 装饰器定义 <code>Pipe</code> 的 <code>metadata</code> 信息，如 <code>Pipe</code> 的名称 - 即 <code>name</code> 属性</li>
<li>实现 <code>PipeTransform</code> 接口中定义的 <code>transform</code> 方法</li>
</ul>
7.1 WelcomePipe 定义
<pre class="hljs javascript"><code class="javascript">import { Pipe, PipeTransform } from '@angular/core';

[@Pipe](/user/Pipe)({ name: 'welcome' })

export class WelcomePipe implements PipeTransform {
transform(value: string): string {
if(!value) return value;
if(typeof value !== 'string') {
 throw new Error('Invalid pipe argument for WelcomePipe');
}
return "Welcome to " + value;
}
}
</code></pre>
7.2 WelcomePipe 使用
<pre class="hljs xml"><code class="xml"><div>
<p ngNonBindable>{{ 'semlinker' | welcome }}</p>
<p>{{ 'semlinker' | welcome }}</p> 
</div>
</code></pre>
7.3 RepeatPipe 定义
<pre class="hljs java"><code class="java">import {Pipe, PipeTransform} from '@angular/core';

[@Pipe](/user/Pipe)({name: 'repeat'})
export class RepeatPipe implements PipeTransform {
transform(value: any, times: number) {
 return value.repeat(times);
}
}
</code></pre>
7.4 RepeatPipe 使用
<pre class="hljs xml"><code class="xml"><div>
<p ngNonBindable>
{{ 'lo' | repeat:3 }}
</p>
<p>
{{ 'lo' | repeat:3 }}
</p>

</div>
</code></pre>
<h2>3.13 实现一个人员登记表单-案例</h2>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="860" data-height="1506"><img src="//upload-images.jianshu.io/upload_images/1480597-a90dfacfafe60f6d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/860/format/webp"></div>
</div>
<div class="image-caption">image.png</div>
</div>
<pre class="hljs bash"><code class="bash"># 创建组件
ng g component components/form
</code></pre>
<pre class="hljs javascript"><code class="javascript">import { Component, OnInit } from '@angular/core';

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

public peopleInfo:any = {
username: '',
sex: '2',
cityList: ['北京', '上海', '深圳'],
city: '上海',

hobby:[{
 title: '吃饭',
 checked:false
 },{
 title:'睡觉',
 checked:false
 },{

 title:'敲代码',
 checked:true
 }],

 mark:''
}

constructor() { }

ngOnInit() {

}
doSubmit(){
/*
jquerydom操作
 <input type="text" id="username" />
 let usernameDom:any=document.getElementById('username');
 console.log(usernameDom.value);
*/

console.log(this.peopleInfo);
}
}
</code></pre>
<pre class="hljs xml"><code class="xml"><h2>人员登记系统</h2>

<div class="people_list">
<ul>
<li>姓名：<input type="text" id="username" [(ngModel)]="peopleInfo.username" value="fonm_input" /></li>
<li>性别：
 <input type="radio" value="1" name="sex" id="sex1" [(ngModel)]="peopleInfo.sex"> <label for="sex1">男 </label>　　　
 <input type="radio" value="2" name="sex"id="sex2" [(ngModel)]="peopleInfo.sex"> <label for="sex2">女 </label>
</li>
<li>
城市：
 <select name="city" id="city" [(ngModel)]="peopleInfo.city">
 <option [value]="item" *ngFor="let item of peopleInfo.cityList">{{item}}</option>
 </select>
</li>
<li>
 爱好：
 <span *ngFor="let item of peopleInfo.hobby;let key=index;">
 <input type="checkbox"[id]="'check'+key" [(ngModel)]="item.checked"/> <label [for]="'check'+key"> {{item.title}}</label>
 &nbsp;&nbsp;
 </span>
</li>
<li>
 备注：
 <textarea name="mark" id="mark" cols="30" rows="10" [(ngModel)]="peopleInfo.mark"></textarea>
</li>
</ul>

<button (click)="doSubmit()" class="submit">获取表单的内容</button>
<br>
<br>
<br>
<br>

<pre>
{{peopleInfo | json}}
</pre>
</div>
</code></pre>
<pre class="hljs scss"><code class="scss">h2{
text-align: center;
}
.people_list{
width: 400px;
margin: 40px auto;
padding:20px;
border:1px solid #eee;
li{
 height: 50px;
 line-height: 50px;
 .fonm_input{
 width: 300px;
 height: 28px;
 }
}

.submit{
 width: 100px;
 height: 30px;
 float: right;
 margin-right: 50px;
 margin-top:120px;
}
}
</code></pre>
<h2>3.14 实现一个完整的ToDo-案例</h2>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="970" data-height="1282"><img src="//upload-images.jianshu.io/upload_images/1480597-591bc5ea4d48865d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/970/format/webp"></div>
</div>
<div class="image-caption">image.png</div>
</div>
基础版
<pre class="hljs bash"><code class="bash"># 创建组件
ng g component components/todo
</code></pre>
<pre class="hljs xml"><code class="xml"><h2>todoList</h2>
<div class="todolist">
<input class="form_input" type="text" [(ngModel)]="keyword" (keyup)="doAdd($event)" />
<hr>
<h3>待办事项</h3>
<ul>
 <li *ngFor="let item of todolist;let key=index;" [hidden]="item.status==1">
 <input type="checkbox" [(ngModel)]="item.status" />{{item.title}} ------ <button (click)="deleteData(key)">X</button>
 </li>
</ul>
<h3>已完成事项</h3>
<ul>
 <li *ngFor="let item of todolist;let key=index;" [hidden]="item.status==0">
 <input type="checkbox" [(ngModel)]="item.status" />{{item.title}} ------ <button (click)="deleteData(key)">X</button>
 </li>
 </ul>
</div>
</code></pre>
<pre class="hljs java"><code class="java">import { Component, OnInit } from '@angular/core';

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

public keyword: string;

public todolist: any[] = [];

constructor() { }

ngOnInit() {
}
doAdd(e){
if(e.keyCode == 13){
 if(!this.todolistHasKeyword(this.todolist, this.keyword)){
 this.todolist.push({
 title: this.keyword,
 status: 0 //0表示代办事项1表示已完成事项
 });
 this.keyword='';
 }else{
 alert('数据已经存在');
 this.keyword='';
 }
}
}

deleteData(key){
this.todolist.splice(key,1);
}

//如果数组里面有keyword返回true否则返回false
todolistHasKeyword(todolist:any, keyword:any){
//异步会存在问题
// todolist.forEach(value => {

// if(value.title==keyword){

// return true;
// }
// });
if(!keyword)return false;

for(var i=0; i<todolist.length; i++){
 if(todolist.title==keyword){
 return true;
 }
}
return false;
}

}
</code></pre>
<pre class="hljs scss"><code class="scss">
h2{
text-align: center;
}
.todolist{

width: 400px;
margin: 20px auto;
.form_input{

 margin-bottom: 20px;

 width: 300px;
 height: 32px;
}

li{

 line-height: 60px;
}

}
</code></pre>
<h2>3.15 搜索缓存数据-案例</h2>
基础版
<pre class="hljs bash"><code class="bash"># 创建组件
ng g component components/search
</code></pre>
<pre class="hljs javascript"><code class="javascript"><div class="search">
<input type="text" [(ngModel)]="keyword" /><button (click)="doSearch()">搜索</button>
<hr>
<ul>
 <li *ngFor="let item of historyList;let key=index;">{{item}} ------ <button (click)="deleteHistroy(key)">X</button></li>
</ul>
</div>
</code></pre>
<pre class="hljs java"><code class="java">import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {
public keyword: string;
public historyList: any[] = [];

constructor() { }
ngOnInit() {
}
doSearch(){
if(this.historyList.indexOf(this.keyword)==-1){
 this.historyList.push(this.keyword);
}
this.keyword = '';
}
deleteHistroy(key){
 alert(key);
 this.historyList.splice(key,1);
}
}
</code></pre>
<pre class="hljs scss"><code class="scss">.search{

width: 400px;
margin: 20px auto;
input{

 margin-bottom: 20px;

 width: 300px;
 height: 32px;
}

button{
 height: 32px;
 width: 80px;
}
}
</code></pre>
<h1>四、Angular 中的服务</h1>
<h2>4.1 服务</h2>
<blockquote>
定义公共的方法，使得方法在组件之间共享调用
</blockquote>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="1512" data-height="648"><img src="//upload-images.jianshu.io/upload_images/1480597-ccc34dcac462199c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp"></div>
</div>
<div class="image-caption">image.png</div>
</div>
1. 创建服务命令
<pre class="hljs bash"><code class="bash">ng g service my-new-service

# 创建到指定目录下面
ng g service services/storage
</code></pre>
2. app.module.ts 里面引入创建的服务
<pre class="hljs javascript"><code class="javascript">// app.module.ts 里面引入创建的服务

import { StorageService } from './services/storage.service';
</code></pre>
<pre class="hljs cpp"><code class="cpp">// NgModule 里面的 providers 里面依赖注入服务

NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
NewsComponent,
TodolistComponent
], imports: [
BrowserModule,
FormsModule
],
providers: ,
bootstrap:
})
export class AppModule { }
</code></pre>
3. 使用的页面引入服务，注册服务
<pre class="hljs javascript"><code class="javascript"> import { StorageService } from '../../services/storage.service';
</code></pre>
<pre class="hljs javascript"><code class="javascript"> constructor(private storage: StorageService) {

}
</code></pre>
<pre class="hljs javascript"><code class="javascript">// 使用

addData(){
// alert(this.username);
this.list.push(this.username);
this.storage.set('todolist',this.list);
}
removerData(key){
console.log(key);
this.list.splice(key,1);
this.storage.set('todolist',this.list);
}
</code></pre>
<h2>4.2 改造上面的Todo、searchList</h2>
searchList
<pre class="hljs javascript"><code class="javascript">import { Component, OnInit } from '@angular/core';

// 引入服务
import { StorageService } from '../../services/storage.service';

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

public keyword: string;
public historyList: any[] = [];

constructor(public storage: StorageService) {
console.log(this.storage.get());
}

ngOnInit() {
// 修改的地方
var searchlist:any=this.storage.get('searchlist');
if(searchlist){
 this.historyList=searchlist;
}
}

doSearch(){
if(this.historyList.indexOf(this.keyword)==-1){
 this.historyList.push(this.keyword);

 // 修改的地方
 this.storage.set('searchlist',this.historyList);
}
this.keyword = '';
}

deleteHistroy(key){
 alert(key);
 this.historyList.splice(key,1);
}

}
</code></pre>
TODOLIST
<pre class="hljs javascript"><code class="javascript">ngOnInit() {
// 修改的地方
var todolist:any=this.storage.get('todolist');

if(todolist){
 this.todolist=todolist;
}
}
doAdd(e){
if(e.keyCode==13){
 if(!this.todolistHasKeyword(this.todolist,this.keyword)){
 this.todolist.push({
 title:this.keyword,
 status:0 //0表示代办事项1表示已完成事项
 });
 this.keyword='';

 // 修改的地方
 this.storage.set('todolist',this.todolist); //用到this一定要注意this指向
 }else{
 alert('数据已经存在');
 this.keyword='';
 }
}
}
// 修改的地方
checkboxChange(){
console.log('事件触发了');

this.storage.set('todolist',this.todolist);
}
</code></pre>
<pre class="hljs xml"><code class="xml"><h2>todoList</h2>
<div class="todolist">
<input class="form_input" type="text" [(ngModel)]="keyword" (keyup)="doAdd($event)" />
<hr>
<h3>待办事项</h3>
<ul>
 <li *ngFor="let item of todolist;let key=index;" [hidden]="item.status==1">
 
 <input type="checkbox" [(ngModel)]="item.status"(change)="checkboxChange()"/>{{item.title}} ------ <button (click)="deleteData(key)">X</button>
 </li>
</ul>
<h3>已完成事项</h3>
<ul>
 <li *ngFor="let item of todolist;let key=index;" [hidden]="item.status==0">

 <input type="checkbox" [(ngModel)]="item.status" (change)="checkboxChange()" />{{item.title}} ------ <button (click)="deleteData(key)">X</button>
 </li>
 </ul>
</div>
</code></pre>
<h1>五、Dom 操作以及@ViewChild、执行 css3 动画</h1>
1. Angular 中的 dom 操作(原生 js)
<pre class="hljs javascript"><code class="javascript">ngAfterViewInit(){
var boxDom:any=document.getElementById('box'); boxDom.style.color='red';
}
</code></pre>
2. Angular 中的 dom 操作(ViewChild)
<pre class="hljs javascript"><code class="javascript"> import { Component ,ViewChild,ElementRef} from '@angular/core';
</code></pre>
<pre class="hljs css"><code class="css"> @ViewChild('myattr') myattr: ElementRef;
</code></pre>
<pre class="hljs cpp"><code class="cpp"><div #myattr></div>
</code></pre>
<pre class="hljs javascript"><code class="javascript">ngAfterViewInit(){
let attrEl = this.myattr.nativeElement;
}
</code></pre>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="744" data-height="1230"><img src="//upload-images.jianshu.io/upload_images/1480597-1adb55ae5489a80f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/744/format/webp"></div>
</div>
<div class="image-caption">@viewChild</div>
</div>
3. 父子组件中通过 ViewChild 调用子组件的方法
<blockquote>
调用子组件给子组件定义一个名称
</blockquote>
<pre class="hljs objectivec"><code class="objectivec"><app-footer #footerChild></app-footer>
</code></pre>
<blockquote>
引入 <code>ViewChild</code>
</blockquote>
<pre class="hljs javascript"><code class="javascript"> import { Component, OnInit ,ViewChild} from '@angular/core';
</code></pre>
<blockquote>
<code>ViewChild</code> 和刚才的子组件关联起来
</blockquote>
<pre class="hljs java"><code class="java"> @ViewChild('footerChild') footer
</code></pre>
<blockquote>
在父组件中调用子组件方法
</blockquote>
<pre class="hljs cpp"><code class="cpp"> run(){
this.footer.footerRun();
}
</code></pre>
<h1>六、Angular 父子组件以及组件之间通讯</h1>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="2592" data-height="1108"><img src="//upload-images.jianshu.io/upload_images/1480597-8d19e6351e1c58a2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp"></div>
</div>
<div class="image-caption">父子组件通讯</div>
</div>
<h2>6.1 父组件给子组件传值-@input</h2>
<blockquote>
父组件不仅可以给子组件传递简单的数据，还可把自己的方法以及整个父组件传给子组件
</blockquote>
1. 父组件调用子组件的时候传入数据
<pre class="hljs xml"><code class="xml"><app-header [msg]="msg"></app-header>
</code></pre>
2. 子组件引入 Input 模块
<pre class="hljs javascript"><code class="javascript">import { Component, OnInit ,Input } from '@angular/core';
</code></pre>
3. 子组件中 @Input 接收父组件传过来的数据
<pre class="hljs java"><code class="java">export class HeaderComponent implements OnInit {
@Input() msg:string

constructor() { }

ngOnInit() {
}
}
</code></pre>
4. 子组件中使用父组件的数据
<pre class="hljs xml"><code class="xml"><p>
child works!
{{msg}}
</p>
</code></pre>
5. 把整个父组件传给子组件
<blockquote>
通过<code>this</code>传递整个组件实例
</blockquote>
<pre class="hljs xml"><code class="xml"><app-header [home]="this"></app-header>
</code></pre>
<pre class="hljs java"><code class="java">export class HeaderComponent implements OnInit {
@Input() home:any

constructor() { }

ngOnInit() {
}
}
</code></pre>
<blockquote>
执行父组件方法 <code>this.home.xxx()</code>
</blockquote>
<h2>6.2 子组件通过@Output 触发父组件的方法（了解）</h2>
1. 子组件引入 Output 和 EventEmitter
<pre class="hljs javascript"><code class="javascript"> import { Component, OnInit ,Input,Output,EventEmitter} from '@angular/core';
</code></pre>
2. 子组件中实例化 EventEmitter
<pre class="hljs cpp"><code class="cpp">@Output() private outer=new EventEmitter<string>(); /*用EventEmitter和output装饰器配合使用 <string>指定类型变量*/
</code></pre>
3. 子组件通过 EventEmitter 对象 outer 实例广播数据
<pre class="hljs java"><code class="java">sendParent(){
// alert('zhixing');
this.outer.emit('msg from child')
}
</code></pre>
4. 父组件调用子组件的时候，定义接收事件 , outer 就是子组件的 EventEmitter 对象 outer
<pre class="hljs xml"><code class="xml">
<app-header (outer)="runParent($event)"></app-header>
</code></pre>
5. 父组件接收到数据会调用自己的 runParent 方法，这个时候就能拿到子组件的数据
<pre class="hljs cpp"><code class="cpp">//接收子组件传递过来的数据
runParent(msg:string){
alert(msg);
}
</code></pre>
<h2>6.3 父组件通过@ViewChild 主动获取子组件的数据和方法</h2>
1. 调用子组件给子组件定义一个名称
<pre class="hljs objectivec"><code class="objectivec"><app-footer #footerChild></app-footer>
</code></pre>
2. 引入 ViewChild
<pre class="hljs javascript"><code class="javascript">import { Component, OnInit ,ViewChild} from '@angular/core';
</code></pre>
3. ViewChild 和刚才的子组件关联起来
<pre class="hljs css"><code class="css"> @ViewChild('footerChild') footer;
</code></pre>
4. 调用子组件
<pre class="hljs cpp"><code class="cpp">run(){ this.footer.footerRun();
}
</code></pre>
<h2>6.4 非父子组件通讯</h2>
<ul>
<li>公共的服务</li>
<li><code>Localstorage</code> (推荐)</li>
<li><code>Cookie</code></li>
</ul>
<h1>七、Angular 中的生命周期函数</h1>
<h2>7.1 Angular中的生命周期函数</h2>
<blockquote>
官方文档:https://www.angular.cn/guide/lifecycle-hooks
</blockquote>
<ul>
<li>生命周期函数通俗的讲就是组件创建、组件更新、组件销毁的时候会触发的一系列的方法。</li>
<li>当 <code>Angular</code> 使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些生命周期钩子方法。</li>
<li>每个接口都有唯一的一个钩子方法，它们的名字是由接口名再加上<code>ng</code>前缀构成的，比如<code>OnInit</code>接口的钩子方法叫做<code>ngOnInit</code>.</li>
</ul>
1. 生命周期钩子分类
<blockquote>
基于指令与组件的区别来分类
</blockquote>
指令与组件共有的钩子
<ul>
<li><code>ngOnChanges</code></li>
<li><code>ngOnInit</code></li>
<li><code>ngDoCheck</code></li>
<li><code>ngOnDestroy</code></li>
</ul>
组件特有的钩子
<ul>
<li><code>ngAfterContentInit</code></li>
<li><code>ngAfterContentChecked</code></li>
<li><code>ngAfterViewInit</code></li>
<li><code>ngAfterViewChecked</code></li>
</ul>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="218" data-height="309"><img src="//upload-images.jianshu.io/upload_images/1480597-417f04c277eef749.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/218/format/webp"></div>
</div>
<div class="image-caption">生命周期钩子</div>
</div>
2. 生命周期钩子的作用及调用顺序
1、<code>ngOnChanges</code> - 当数据绑定输入属性的值发生变化时调用 
2、<code>ngOnInit</code> - 在第一次 <code>ngOnChanges</code> 后调用 
3、<code>ngDoCheck</code> - 自定义的方法，用于检测和处理值的改变 
4、<code>ngAfterContentInit</code> - 在组件内容初始化之后调用 
5、<code>ngAfterContentChecked</code> - 组件每次检查内容时调用 
6、<code>ngAfterViewInit</code> - 组件相应的视图初始化之后调用 
7、<code>ngAfterViewChecked</code> - 组件每次检查视图时调用 
8、<code>ngOnDestroy</code> - 指令销毁前调用
3. 首次加载生命周期顺序
<pre class="hljs javascript"><code class="javascript">export class LifecircleComponent {

constructor() {

 console.log('00构造函数执行了---除了使用简单的值对局部变量进行初始化之外，什么都不应该做')
}

ngOnChanges() {

 console.log('01ngOnChages执行了---当被绑定的输入属性的值发生变化时调用(父子组件传值的时候会触发)');
}

ngOnInit() {
 console.log('02ngOnInit执行了--- 请求数据一般放在这个里面');
}
ngDoCheck() {
 console.log('03ngDoCheck执行了---检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应');
}
ngAfterContentInit() {
 console.log('04ngAfterContentInit执行了---当把内容投影进组件之后调用');
}
ngAfterContentChecked() {
 console.log('05ngAfterContentChecked执行了---每次完成被投影组件内容的变更检测之后调用');
}
ngAfterViewInit() : void {
 console.log('06 ngAfterViewInit执行了----初始化完组件视图及其子视图之后调用（dom操作放在这个里面）');
}
ngAfterViewChecked() {
 console.log('07ngAfterViewChecked执行了----每次做完组件视图和子视图的变更检测之后调用');
}

ngOnDestroy() {
 console.log('08ngOnDestroy执行了····');
}

//自定义方法
changeMsg() {

 this.msg = "数据改变了";
}
}
</code></pre>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="2518" data-height="714"><img src="//upload-images.jianshu.io/upload_images/1480597-7e0081f4616fe461.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp"></div>
</div>
<div class="image-caption">生命周期调用顺序</div>
</div>
<blockquote>
带<code>check</code>的可以对数据做响应操作
</blockquote>
<pre class="hljs xml"><code class="xml"><button (click)="changeMsg()">数据改变了</button>
<input type='text' [(ngModel)]="userInfo" />
</code></pre>
<blockquote>
点击按钮/双向数据绑定此时触发了以下生命周期。只要数据改变
</blockquote>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="1096" data-height="222"><img src="//upload-images.jianshu.io/upload_images/1480597-158cdd9fe4f9f028.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp"></div>
</div>
<div class="image-caption">cheked</div>
</div>
<blockquote>
可以在<code>check</code>做一些操作
</blockquote>
<pre class="hljs javascript"><code class="javascript">ngDoCheck() {
 //写一些自定义的操作

 console.log('03ngDoCheck执行了---检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应');
 if(this.userinfo!==this.oldUserinfo){
 console.log(`你从${this.oldUserinfo}改成${this.userinfo}`);
 this.oldUserinfo = this.userinfo;
 }else{

 console.log("数据没有变化");
 }

}
</code></pre>
<h2>7.2 生命周期钩子详解</h2>
<h3>7.2.1 constructor-掌握</h3>
<blockquote>
<code>constructor</code>，来初始化类。<code>Angular</code>中的组件就是基于<code>class</code>类实现的，在<code>Angular</code>中，<code>constructor</code>用于注入依赖。组件的构造函数会在所有的生命周期钩子之前被调用，它主要用于依赖注入或执行简单的数据初始化操作。
</blockquote>
<pre class="hljs javascript"><code class="javascript">import { Component, ElementRef } from '@angular/core';

@Component({
selector: 'my-app',
template: `
<h1>Welcome to Angular World</h1>
Hello {{name}}
`,
})
export class AppComponent {
name: string = '';

constructor(public elementRef: ElementRef) {//使用构造注入的方式注入依赖对象
// 执行初始化操作
this.name = 'Semlinker';
}
}
</code></pre>
<h3>7.2.2 ngOnChanges()</h3>
<blockquote>
当 <code>Angular</code>(重新)设置数据绑定输入属性时响应。该方法接受当前和上一属性值的 <code>SimpleChanges</code> 对象当被绑定的输入属性的值发生变化时调用，首次调用一定会发生在 <code>ngOnInit()</code>之前。
</blockquote>
<pre class="hljs xml"><code class="xml">
<app-header [title]="title"></app-header>
</code></pre>
<blockquote>
此时改变<code>title</code>会触发<code>ngOnChanges</code>生命周期，并且也会触发
</blockquote>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="1096" data-height="222"><img src="//upload-images.jianshu.io/upload_images/1480597-158cdd9fe4f9f028.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp"></div>
</div>
<div class="image-caption">cheked</div>
</div>
<h3>7.2.3 ngOnInit()--掌握</h3>
<blockquote>
在 <code>Angular</code> 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。在第一轮 <code>ngOnChanges()</code> 完成之后调用，只调用一次。可以请求数据
</blockquote>
<ul>
<li>使用 ngOnInit() 有两个原因:
<ul>
<li>在构造函数之后马上执行复杂的初始化逻辑</li>
<li>在 <code>Angular</code> 设置完输入属性之后，对该组件进行准备。有经验的开发者会认同组件的构建应该很便宜和安全</li>
</ul>
</li>
</ul>
<pre class="hljs javascript"><code class="javascript">import { Component, Input, OnInit } from '@angular/core';

@Component({
selector: 'exe-child',
template: `
父组件的名称：{{pname}} 
`
})
export class ChildComponent implements OnInit {
@Input()
pname: string; // 父组件的名称

constructor() {
 console.log('ChildComponent constructor', this.pname);
 // Output：undefined
}

ngOnInit() {
 console.log('ChildComponent ngOnInit', this.pname);
 // output: 输入的pname值
}
}
</code></pre>
<h3>7.2.4 ngDoCheck()</h3>
<blockquote>
检测，并在发生 <code>Angular</code> 无法或不愿意自己检测的变化时作出反应。在每个 <code>Angular</code> 变更检测周期中调用， <code>ngOnChanges()</code> 和 <code>ngOnInit()</code>之后。
</blockquote>
<h3>7.2.5 ngAfterContentInit()</h3>
<blockquote>
当把内容投影进组件之后调用。第一次 <code>ngDoCheck()</code> 之后调用，只调用一次
</blockquote>
<h3>7.2.6 ngAfterContentChecked()</h3>
<blockquote>
每次完成被投影组件内容的变更检测之后调用。 <code>ngAfterContentInit()</code> 和每次 <code>ngDoCheck()</code> 之后调
</blockquote>
<h3>7.2.7 ngAfterViewInit()--掌握</h3>
<blockquote>
初始化完组件视图及其子视图之后调用。第一次 <code>ngAfterContentChecked()</code> 之后调用，只调用一次。在这里可以操作<code>DOM</code>
</blockquote>
<h3>7.2.8 ngAfterViewChecked()</h3>
<blockquote>
每次做完组件视图和子视图的变更检测之后调用。 <code>ngAfterViewInit()</code>和每次 <code>ngAfterContentChecked()</code> 之后调用。
</blockquote>
<h3>7.2.9 ngOnDestroy()--掌握</h3>
<blockquote>
当 <code>Angular</code> 每次销毁指令/组件之前调用并清扫。在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏。在 <code>Angular</code> 销毁指令/组件之前调用。比如：移除事件监听、清除定时器、退订 <code>Observable</code> 等。
</blockquote>
<pre class="hljs javascript"><code class="javascript">@Directive({
selector: ''
})
export class OnDestroyDirective implements OnDestroy {
sayHello: number;

constructor() {
this.sayHiya = window.setInterval(() => console.log('hello'), 1000);
}

ngOnDestroy() {
window.clearInterval(this.sayHiya);
}
}
</code></pre>
<h1>八、Rxjs 异步数据流编程</h1>
<h2>8.1 Rxjs介绍</h2>
<blockquote>
<ul>
<li>参考手册:https://www.npmjs.com/package/rxjs</li>
<li>中文手册:https://cn.rx.js.org/</li>
</ul>
</blockquote>
<blockquote>
<code>RxJS</code> 是 <code>ReactiveX</code> 编程理念的 <code>JavaScript</code> 版本。<code>ReactiveX</code> 来自微软，它是一种针对异步数据流的编程。简单来说，它将一切数据，包括 <code>HTTP</code> 请求，<code>DOM</code> 事件或者普通数据等包装成流的形式，然后用强大丰富的操作符对流进行处理，使你能以同步编程的方式处理异步数据，并组合不同的操作符来轻松优雅的实现你所需要的功能。
</blockquote>
<ul>
<li><code>RxJS</code> 是一种针对异步数据流编程工具，或者叫响应式扩展编程;可不管如何解释 RxJS 其目标就是异步编程，<code>Angular</code> 引入 <code>RxJS</code> 为了就是让异步可控、更简单。</li>
<li><code>RxJS</code> 里面提供了很多模块。这里我们主要给大家讲 <code>RxJS</code> 里面最常用的<code>Observable</code> 和 f<code>romEvent</code></li>
</ul>
目前常见的异步编程的几种方法:
<ul>
<li>回调函数</li>
<li>事件监听/发布订阅</li>
<li><code>Promise</code></li>
<li><code>Rxjs</code></li>
</ul>
<h2>8.2 Promise和RxJS处理异步对比</h2>
<blockquote>
新建一个<code>services</code>
</blockquote>
<pre class="hljs bash"><code class="bash">ng g service services/rxjs
</code></pre>
<blockquote>
在<code>services/rxjs.service.ts</code>中写以下方法
</blockquote>
<pre class="hljs javascript"><code class="javascript">import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class RxjsService {
constructor() { }

// Promise 处理异步
getPromiseData() {
return new Promise(resolve = >{
setTimeout(() = >{
 resolve('---promise timeout---');
},
2000);
});

// RxJS 处理异步:
getRxjsData() {
return new Observable(observer = >{
 setTimeout(() = >{
 observer.next('observable timeout');
 },
 2000);
});
}

}
</code></pre>
<pre class="hljs javascript"><code class="javascript">// 在其他组件使用服务
import { Component, OnInit } from '@angular/core';
import { RxjsService } from '../../services/rxjs.service';

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

// 注入服务
constructor(public request: RxjsService) {

}

ngOnInit() {
// 调用方法
this.request.getRxjsData().subscribe(data=>{
 console.log(data)
})
}

}
</code></pre>
<ul>
<li>从上面列子可以看到 <code>RxJS</code> 和 <code>Promise</code>的基本用法非常类似，除了一些关键词不同。<code>Promise</code> 里面用的是 <code>then()</code> 和 <code>resolve()</code>，而 <code>RxJS</code>里面用的是 <code>next()</code> 和 <code>subscribe()</code></li>
<li><code>Rxjs</code>相比<code>Promise</code>要强大很多。比如 <code>Rxjs</code> 中可以中途撤回、<code>Rxjs</code> 可以发射多个值、<code>Rxjs</code> 提供了多种工具函数等等</li>
</ul>
<h2>8.3 Rxjs unsubscribe 取消订阅</h2>
<blockquote>
<code>Promise</code> 的创建之后，动作是无法撤回的。<code>Observable</code> 不一样，动作可以通过 <code>unsbscribe()</code> 方法中途撤回，而且 <code>Observable</code> 在内部做了智能的处理.
</blockquote>
Promise 创建之后动作无法撤回
<pre class="hljs javascript"><code class="javascript">let promise = new Promise(resolve = >{
setTimeout(() = >{
 resolve('---promise timeout---');
},
2000);
});
promise.then(value = >console.log(value));
</code></pre>
Rxjs 可以通过 unsubscribe() 可以撤回 subscribe 的动作
<pre class="hljs javascript"><code class="javascript">let stream = new Observable(observer = >{
let timeout = setTimeout(() = >{
 clearTimeout(timeout);
 observer.next('observable timeout');
},
2000);
});
let disposable = stream.subscribe(value = >console.log(value));
setTimeout(() = >{
//取消执行 disposable.unsubscribe();
},
1000);
</code></pre>
<h2>8.4 Rxjs 订阅后多次执行</h2>
<ul>
<li>如果我们想让异步里面的方法多次执行，比如下面代码。</li>
</ul>
<blockquote>
这一点 <code>Promise</code>是做不到的，对于 <code>Promise</code>来说，最终结果要么 <code>resole</code>(兑现)、要么 <code>reject</code> (拒绝)，而且都只能触发一次。如果在同一个 <code>Promise</code> 对象上多次调用 <code>resolve</code> 方法，则会抛异常。而 <code>Observable</code>不一样，它可以不断地触发下一个值，就像 <code>next()</code>这个方法的名字所暗示的那样。
</blockquote>
<pre class="hljs javascript"><code class="javascript">let promise = new Promise(resolve = >{
setInterval(() = >{
 resolve('---promise setInterval---');
},
2000);
});
promise.then(value = >console.log(value));
</code></pre>
Rxjs
<pre class="hljs javascript"><code class="javascript">let stream = new Observable < number > (observer = >{
let count = 0;
setInterval(() = >{
 observer.next(count++);
},
1000);
});
stream.subscribe(value = >console.log("Observable>" + value));
</code></pre>
<h2>8.5 Angualr6.x之前使用Rxjs的工具函数 map filter</h2>
<blockquote>
注意:<code>Angular6</code> 以后使用以前的<code>rxjs</code> 方法，必须安装 <code>rxjs-compat</code> 模块才可以使用 <code>map</code>、<code>filter</code> 方法。
</blockquote>
<blockquote>
<code>angular6</code> 后官方使用的是 <code>RXJS6</code>的新特性，所以官方给出了一个可以暂时延缓我们不需要修改 <code>rsjx</code> 代码的办法
</blockquote>
<pre class="hljs bash"><code class="bash">npm install rxjs-compat
</code></pre>
<pre class="hljs javascript"><code class="javascript">import {Observable} from 'rxjs'; import 'rxjs/Rx';
</code></pre>
<pre class="hljs javascript"><code class="javascript">let stream = new Observable < any > (observer = >{
let count = 0;
setInterval(() = >{
 observer.next(count++);
},
1000);
});
stream.filter(val = >val % 2 == 0).subscribe(value = >console.log("filter>" + value));
stream.map(value = >{
return value * value
}).subscribe(value = >console.log("map>" + value));
</code></pre>
<h2>8.6 Angualr6.x 以后 Rxjs6.x 的变化以及使用</h2>
<h3>8.6.1 Rxjs 的变化参考</h3>
<blockquote>
从<code>Angular5</code>升级到<code>Angular6</code>， <code>angular6</code>相比较于<code>angular5</code>总体变化不大，但是在<code>RXJS</code>上面却有一些变动，下面给大家讲讲关于<code>Angular6</code>版本升级和<code>RXJS6</code>新特性的讲解
</blockquote>
1. angular6 Angular7中使用以前的rxjs
<blockquote>
对于写了半年多的项目，模块已经很多了，所以不可能在升级到<code>angular6</code>后马上更新所有代码关于<code>RXJS6</code>的新特性，所以官方给出了一个可以暂时延缓我们不需要修改<code>rsjx</code>代码的办法。
</blockquote>
<pre class="hljs undefined"><code class="js">npm install --save rxjs-compat
</code></pre>
<ul>
<li>优点：暂时不用改代码，可以一点点地改，直到改完后吧这个包卸掉</li>
<li>缺点：对于<code>rxjs6</code>的<code>rename</code>的<code>operator</code>无效，所以，如果有用到<code>rename</code>的<code>API</code>，必须手动修改</li>
</ul>
2. Angular6 以后 RXJS6的变化
<blockquote>
<code>RXJS6</code>改变了包的结构，主要变化在 <code>import</code>方式和<code>operator</code>上面以及使用<code>pipe()</code>
</blockquote>
2.1 Imports 方式改变
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="637" data-height="173"><img src="//upload-images.jianshu.io/upload_images/1480597-1cde10680c8b574d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/637/format/webp"></div>
</div>
<div class="image-caption">image.png</div>
</div>
<blockquote>
从<code>rxjs</code>中类似像导入<code>observable</code> <code>subject</code> 等的不再进一步导入，而是止于<code>rxjs</code>, <code>rxjs6</code>在包的结构上进行了改变
</blockquote>
2.2 operator的改变
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="625" data-height="229"><img src="//upload-images.jianshu.io/upload_images/1480597-4a44b397ec43e2c8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/625/format/webp"></div>
</div>
<div class="image-caption">image.png</div>
</div>
<blockquote>
总而言之：类似于创建之类的用的<code>API</code>都是从<code>rxjs</code>引入的，类似于<code>map</code> 之类的操作都是从<code>rxjs/operators</code>引入的
</blockquote>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="498" data-height="128"><img src="//upload-images.jianshu.io/upload_images/1480597-123266ac988768f9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/498/format/webp"></div>
</div>
<div class="image-caption">image.png</div>
</div>
2.3 pipeable observable
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="673" data-height="275"><img src="//upload-images.jianshu.io/upload_images/1480597-bacc3d7dfc4d6ca4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/673/format/webp"></div>
</div>
<div class="image-caption">image.png</div>
</div>
2.4 被重新命名的API
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="589" data-height="366"><img src="//upload-images.jianshu.io/upload_images/1480597-0063669c8de12ebc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/589/format/webp"></div>
</div>
<div class="image-caption">image.png</div>
</div>
<blockquote>
<code>RXJS6</code> 改变了包的结构，主要变化在 <code>import</code> 方式和 <code>operator</code> 上面以及使用 <code>pipe()</code>
</blockquote>
<pre class="hljs javascript"><code class="javascript">import {Observable} from 'rxjs';
import {map,filter} from 'rxjs/operators';
</code></pre>
<pre class="hljs javascript"><code class="javascript">let stream= new Observable<any>(observer => {
let count = 0;
setInterval(() = >{
 observer.next(count++);
},
1000);
});

stream.pipe(filter(val = >val % 2 == 0))
.subscribe(value = >console.log("filter>" + value));

stream
.pipe(
filter(val = >val % 2 == 0),
map(value = >{
 return value * value
}))
.subscribe(value = >console.log("map>" + value));
</code></pre>
<h2>8.7 Rxjs 延迟执行</h2>
<pre class="hljs javascript"><code class="javascript">import {
Observable,
fromEvent
}
from 'rxjs';
import {
map,
filter,
throttleTime
}
from 'rxjs/operators';

var button = document.querySelector('button');

fromEvent(button, 'click')
.pipe(throttleTime(1000))
.subscribe(() = >console.log(`Clicked`));
</code></pre>
<h1>九、Angular 中的数据交互(get jsonp post)</h1>
<h2>9.1 Angular get 请求数据</h2>
<blockquote>
<code>Angular5.x</code> 以后 <code>get</code>、<code>post</code> 和和服务器交互使用的是 <code>HttpClientModule</code> 模块。
</blockquote>
1. 在 app.module.ts 中引入 HttpClientModule 并注入
<pre class="hljs javascript"><code class="javascript">import {HttpClientModule} from '@angular/common/http';
</code></pre>
<pre class="hljs undefined"><code class="js">imports: [
BrowserModule,
HttpClientModule
]
</code></pre>
2. 在用到的地方引入 HttpClient 并在构造函数声明
<pre class="hljs javascript"><code class="javascript">import {HttpClient} from "@angular/common/http";

constructor(public http:HttpClient) { }
</code></pre>
3. get 请求数据
<pre class="hljs javascript"><code class="javascript">var api = "http://a.itying.com/api/productlist";

this.http.get(api).subscribe(response => {
console.log(response); });
</code></pre>
<h2>9.2 Angular post 提交数据</h2>
<blockquote>
<code>Angular5.x</code> 以后 <code>get</code>、<code>post</code> 和和服务器交互使用的是<code>HttpClientModule</code> 模块。
</blockquote>
1. 在 app.module.ts 中引入 HttpClientModule 并注入
<pre class="hljs javascript"><code class="javascript">import {HttpClientModule} from '@angular/common/http';

imports: [
BrowserModule,
HttpClientModule
]
</code></pre>
2. 在用到的地方引入 HttpClient、HttpHeaders 并在构造函数声明 HttpClient
<pre class="hljs javascript"><code class="javascript">import {HttpClient,HttpHeaders} from "@angular/common/http";

constructor(public http:HttpClient) { }
</code></pre>
3. post 提交数据
<blockquote>
用<code>express</code>搭建一个<code>server</code>
</blockquote>
<pre class="hljs cpp"><code class="cpp">// package.json
{
"dependencies": {
"ejs": "^2.5.6",
"express": "^4.15.3",
"socket.io": "^2.0.3",
"body-parser": "~1.17.1"
}
}
</code></pre>
<pre class="hljs javascript"><code class="javascript">// app.js 代码
var express = require('express');
var app=express();
var bodyParser = require('body-parser');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

/*express允许跨域*/
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
if(req.method=="OPTIONS") res.send(200);
elsenext();
});

//app.use(express.static(path.join(__dirname, 'public')));

app.get('/',function(req,res){
res.send('首页');
})
app.post('/dologin',function(req,res){
console.log(req.body);
res.json({"msg":'post成功'});
})

app.get('/news',function(req,res){

//console.log(req.body);
res.jsonp({"msg":'这是新闻数据'});

})

app.listen(3000,'127.0.0.1',function(){
console.log('项目启动在3000端口')
});
</code></pre>
<pre class="hljs javascript"><code class="javascript">// angular代码

doLogin() {

// 手动设置请求类型
const httpOptions = {
headers: new HttpHeaders({
 'Content-Type': 'application/json'
})
};
var api = "http://127.0.0.1:3000/doLogin";

this.http.post(api, {
username: '张三',
age: '20'
},
httpOptions).subscribe(response = >{
console.log(response);
});
}
</code></pre>
<h2>9.3 Angular Jsonp 请求数据</h2>
1. 在 app.module.ts 中引入 HttpClientModule、HttpClientJsonpModule 并注入
<pre class="hljs javascript"><code class="javascript"> import {HttpClientModule,HttpClientJsonpModule} from '@angular/common/http';
</code></pre>
<pre class="hljs undefined"><code class="js">imports: [
BrowserModule,
HttpClientModule,
HttpClientJsonpModule
]
</code></pre>
3. 在用到的地方引入 HttpClient 并在构造函数声明
<pre class="hljs javascript"><code class="javascript">import {HttpClient} from "@angular/common/http";

constructor(public http:HttpClient) { }
</code></pre>
3. jsonp 请求数据
<pre class="hljs javascript"><code class="javascript">// 接口支持jsonp请求
var api = "http://a.itying.com/api/productlist";

this.http.jsonp(api,'callback').subscribe(response => {
console.log(response); });
</code></pre>
<h2>9.4 Angular 中使用第三方模块 axios 请求数据</h2>
1. 安装 axios
<pre class="hljs undefined"><code class="js">cnpm install axios --save
</code></pre>
2. 用到的地方引入 axios
<pre class="hljs javascript"><code class="javascript">import axios from 'axios';
</code></pre>
3. 看文档使用
<pre class="hljs javascript"><code class="javascript">axios.get('/user?ID=12345').then(function(response) {
// handle success
console.log(response);
}).
catch(function(error) {
// handle error console.log(error);
}).then(function() {
// always executed
});

</code></pre>
<h1>十、Angular 中的路由</h1>
<h2>10.1 Angular 创建一个默认带路由的项目</h2>
1. 命令创建项目
<pre class="hljs cpp"><code class="cpp">ng new angualrdemo08 --skip-install
</code></pre>
2. 创建需要的组件
<pre class="hljs bash"><code class="bash">ng g component home
ng g component news
ng g component newscontent
</code></pre>
3. 找到 app-routing.module.ts 配置路由
<pre class="hljs javascript"><code class="javascript">// 引入组件

import { HomeComponent } from './home/home.component';
import { NewsComponent } from './news/news.component';
import { NewscontentComponent } from './newscontent/newscontent.component';

// 配置路由
const routes: Routes = [
{path: 'home', component: HomeComponent},
{path: 'news', component: NewsComponent},
{path: 'newscontent/:id', component: NewscontentComponent},
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
} ];
</code></pre>
4. 找到 app.component.html 根组件模板，配置 router-outlet 显示动态加载的路由
<pre class="hljs xml"><code class="xml"><h1>
<a routerLink="/home">首页</a> <a routerLink="/news">新闻</a>
</h1>
<router-outlet></router-outlet>
</code></pre>
<h2>10.2 routerLink 跳转页面默认路由</h2>
<pre class="hljs xml"><code class="xml"> <a routerLink="/home">首页</a>
<a routerLink="/news">新闻</a>
</code></pre>
<pre class="hljs java"><code class="java">//匹配不到路由的时候加载的组件或者跳转的路由
{
path: '**', /*任意的路由*/
// component:HomeComponent
redirectTo:'home'
}
</code></pre>
<h2>10.3 routerLinkActive 设置routerLink 默认选中路由</h2>
<pre class="hljs xml"><code class="xml"><h1>
<a routerLink="/home" routerLinkActive="active">首页</a> <a routerLink="/news" routerLinkActive="active">新闻</a>
</h1>
</code></pre>
<pre class="hljs xml"><code class="xml"><h1>
<a [routerLink]="[ '/home' ]" routerLinkActive="active">首页</a> <a [routerLink]="[ '/news' ]" routerLinkActive="active">新闻</a>
</h1>
</code></pre>
<pre class="hljs css"><code class="css"> .active{
color:red;
}
</code></pre>
<h2>10.4 routerLink Get传递参数</h2>
1. 跳转
<pre class="hljs javascript"><code class="javascript"><li *ngFor="let item of list;let key=index;">
 

 <a [routerLink]="['/news-detail']" [queryParams]="{aid:key}">{{key}}--{{item}}</a>

</li>
</code></pre>
2. 接收参数
<pre class="hljs javascript"><code class="javascript"> import { ActivatedRoute } from '@angular/router';

constructor(public route:ActivatedRoute) { }

this.route.queryParams.subscribe((data)=>{
 console.log(data);
})
</code></pre>
<h2>10.5 动态路由</h2>
1.配置动态路由
<pre class="hljs java"><code class="java">const routes: Routes = [
{path: 'home', component: HomeComponent},
{path: 'news', component: NewsComponent},
{path: 'newscontent/:id', component: NewscontentComponent},
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
} ];
</code></pre>
2. 跳转传值
<pre class="hljs xml"><code class="xml"><a [routerLink]="[ '/newscontent/',aid]">跳转到详情</a>
<a routerLink="/newscontent/{{aid}}">跳转到详情</a>
</code></pre>
3. 获取动态路由的值
<pre class="hljs javascript"><code class="javascript">import { ActivatedRoute} from '@angular/router';

constructor( private route: ActivatedRoute) { }

ngOnInit() {
console.log(this.route.params);
this.route.params.subscribe(data=>this.id=data.id);
}
</code></pre>
<h2>10.6 动态路由的 js 跳转</h2>
<pre class="hljs javascript"><code class="javascript">// 引入
import { Router } from '@angular/router';

// 初始化

export class HomeComponent implements OnInit {
constructor(private router: Router) {}
ngOnInit() {}
goNews(){
// this.router.navigate(['/news', hero.id]);
 this.router.navigate(['/news']);
 }
}
</code></pre>
<pre class="hljs java"><code class="java">// 路由跳转
this.router.navigate(['/news', hero.id]);
</code></pre>
<h2>10.7 路由 get 传值 js 跳转</h2>
1. 引入 NavigationExtras
<pre class="hljs javascript"><code class="javascript">import { Router ,NavigationExtras} from '@angular/router';
</code></pre>
2. 定义一个 goNewsContent 方法执行跳转，用 NavigationExtras 配置传参。
<pre class="hljs javascript"><code class="javascript">goNewsContent() {
let navigationExtras: NavigationExtras = {
 queryParams: {
 'session_id': '123'
 },
 fragment: 'anchor'
};
this.router.navigate(['/news'], navigationExtras);
}
</code></pre>
3. 获取 get 传值
<pre class="hljs javascript"><code class="javascript"> constructor(private route: ActivatedRoute) {
console.log(this.route.queryParams);
}
</code></pre>
<h2>10.8 父子路由</h2>
1. 创建组件引入组件
<pre class="hljs javascript"><code class="javascript">import { NewsaddComponent } from './components/newsadd/newsadd.component';
import { NewslistComponent } from './components/newslist/newslist.component';
</code></pre>
2. 配置路由
<pre class="hljs css"><code class="css">{
path: 'news',
component: NewsComponent,
children: [{
 path: 'newslist',
 component: NewslistComponent
},
{
 path: 'newsadd',
 component: NewsaddComponent
}]
}
</code></pre>
3. 父组件中定义 router-outlet
<pre class="hljs xml"><code class="xml"> <router-outlet></router-outlet>
</code></pre>
<h1>十一、更多参考</h1>
<ul>
<li>Angular中文文档</li>
</ul>
</div>
 
来源：https://www.cnblogs.com/mary-123/p/11225260.html

頁: [1]

琼殿技术论坛's Archiver

angular入门