【Angular】Anglar2

胡西风_foxww

已于 2024-10-14 09:48:08 修改

阅读量348

点赞数

CC 4.0 BY-SA版权

分类专栏： # Vue_Angular_React 文章标签： angular2 angular 入门

于 2018-11-14 19:26:05 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/my_study_everyday/article/details/84072375

Vue_Angular_React 专栏收录该内容

38 篇文章

订阅专栏

官网传送门

安装CLI及搭建项目

> npm install -g @angular/cli
> ng new my-app  或 ng new my-app --style=scss
> cd my-app 
> ng serve --open
网络慢可切换至cnpm 
> ng set --global packageManager=cnpm

angular-cli修改端口号

创建module，component，service，class命令
例如：创建模块

ng generate component my-component-name

例如：创建服务

ng g s my-s-name

显示数据

使用插值表达式显示组件(Component)属性

要显示组件的属性，最简单的方式就是通过插值表达式 (interpolation) 来绑定属性名。要使用插值表达式，就把属性名包裹在双花括号里放进视图模板，如{{myHero}}Angular 自动从组件中提取myHero属性的值，并且把这些值插入浏览器中。当这些属性发生变化时，Angular 就会自动刷新显示。

内联 (inline) 模板还是模板文件？

无差别，根据个人喜好来。内联是template，模板文件使用templateUrl

使用ngFor显示数组属性

<li *ngFor="let hero of heroes">

ngFor的*前缀表示

及其子元素组成了一个主控模板。ngFor指令在AppComponent.heroes属性返回的heroes数组上迭代，并输出此模板的实例。引号中赋值给ngFor的那段文本表示“从heroes数组中取出每个英雄，存入一个局部的hero变量，并让它在相应的模板实例中可用”。要学习更多关于ngFor和模板输入变量的知识，参见显示数据一章的用*ngFor显示数组属性和模板语法章的ngFor。

通过 NgIf 进行条件显示

<p *ngIf="heroes.length > 3">There are many heroes!</p>

Angular 的ngIf指令会根据一个布尔条件来显示或移除一个元素。

双向数据绑定

[(ngModel)] = "hero.name"

双向数据绑定: [(ngModel)]是一个Angular语法，用与把hero.name绑定到输入框中。它的数据流是双向的：从属性到输入框，并且从输入框回到属性。虽然NgModel是一个有效的Angular指令，但它默认情况下却是不可用的。它属于一个可选模块FormsModule。我们必须选择使用那个模块。

处理点击事件

<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
  ...
</li>

圆括号标识

元素上的click事件是绑定的目标。等号右边的onSelect(hero)表达式调用AppComponent的onSelect()方法，并把模板输入变量hero作为参数传进去。它是我们前面在ngFor指令中定义的那个hero变量。

css [class]

/*
当表达式(hero === selectedHero)为true时，
Angular会添加一个CSS类selected。为false时则会移除selected类。
*/
[class.selected]="hero === selectedHero"

关于[class]绑定的更多信息，参见模板语法。

组件命名指南

文件名和组件名遵循风格指南中的标准方式。组件的类名应该是大驼峰形式，并且以Component结尾。因此英雄详情组件的类名是HeroDetailComponent。组件的文件名应该是小写中线形式，每个单词之间用中线分隔，并且以.component.ts结尾。因此HeroDetailComponent类应该放在hero-detail.component.ts文件中。

定义组件

要定义一个组件，我们总是要先导入符号Component。@Component装饰器为组件提供了Angular元数据。 CSS选择器的名字hero-detail会匹配元素的标签名，用于在父组件的模板中标记出当前组件的位置。本章的最后，我们会把添加到AppComponent的模板中。总是export这个组件类，因为你必然会在别处import它。

父组件向子组件传递值

/*
在等号的左边，是方括号围绕的hero属性，
这表示它是属性绑定表达式的目标。 
我们要绑定到的目标属性必须是一个输入属性，
否则Angular会拒绝绑定，并抛出一个错误。
*/
<hero-detail [hero]="selectedHero"></hero-detail>

父组件AppComponent会告诉子组件HeroDetailComponent要显示哪个英雄，告诉的方法是把它的selectedHero属性绑定到HeroDetailComponent的hero属性上

要保证目标属性是一个输入属性：

首先，修改@angular/core导入语句，使其包含符号Input。
import { Component, Input } from '@angular/core';
然后，通过在hero属性前面加上@Input装饰器，来表明它是一个输入属性。
@Input() hero: Hero;

每个组件都必须在一个（且只有一个）Angular模块中声明。

在AppModule中声明HeroDetailComponent,打开app.module.ts并且导入HeroDetailComponent，以便我们可以引用它。import { HeroDetailComponent } from './hero-detail.component';把HeroDetailComponent添加到该模块的declarations数组中。declarations: [ AppComponent, HeroDetailComponent ],通常，declarations数组包含应用中属于该模块的组件、管道和指令的列表。组件在被其它组件引用之前必须先在一个模块中声明过

创建英雄服务

import { Injectable } from '@angular/core';

@Injectable()
export class HeroService {
}

当 TypeScript 看到@Injectable()装饰器时，就会记下本服务的元数据。如果 Angular 需要往这个服务中注入其它依赖，就会使用这些元数据。HeroService可以从任何地方获取Hero数据 —— Web服务、本地存储或模拟数据源。从组件中移除数据访问逻辑意味着你可以随时更改这些实现方式，而不影响需要这些英雄数据的组件。

路由器导航

Angular 路由器是一个可选的外部 Angular NgModule，名叫RouterModule。路由器包含了多种服务(RouterModule)、多种指令(RouterOutlet、RouterLink、RouterLinkActive)、和一套配置(Routes)。我们将先配置路由。

引入路由模块 import { RouterModule, Routes } from '@angular/router';
配置路由 {path:'dir',component:HomeComponent}
路由输出配置 <router-outlet></router-outlet>
路由链接 <a [RouterLink] = "['home']">home</a>

配置带参数的路由

导致这次大修的原因是如何获得这个英雄的数据。
我们不会再从父组件的属性绑定中接收英雄数据。新的HeroDetailComponent
应该从ActivatedRoute服务的可观察对象params中取得id参数，并通过HeroService服务获取具有这个指定id的英雄数据。在ngOnInit()生命周期钩子中，我们从ActivatedRoute服务的可观察对象params中提取id参数，并且使用HeroService来获取具有这个id的英雄数据。。

使用uppercase管道格式化

注意，英雄的名字全被显示成大写字母。那是uppercase管道的效果，借助它，我们能干预插值表达式绑定的过程。可以管道操作符 ( | ) 后面看到它。管道擅长做下列工作：格式化字符串、金额、日期和其它显示数据。 Angular 自带了一些管道，我们也可以写自己的管道。

{{selectedHero.name | uppercase}} is my hero