【前端骚操作】Angular学习上手手册

Angular组件

新建组件语法：

ng g c new-component

自动写入src/app/app.module.ts，包含import与declarations。

组件ts

装饰器

@Component({
  selector: 'app-heroes', // 选择器名称
  templateUrl: './heroes.component.html', // 模板html
  styleUrls: ['./heroes.component.css'] // 样式表，独立，是个数组，即可内部模块化
})

属性

hero: Hero = {
    id: 1,
    name: 'Windstorm'
  }

管道

{{title | uppercase}}

---

组件html

双向绑定

[(ngModel)]='hero.name'

[(ngModel)]功能默认不提供，需要自行import：

import { FormsModule } from '@angular/forms'; // <-- NgModel lives here

imports: [
  BrowserModule,
  FormsModule, // 加到这里
],

循环遍历生成

*ngFor="let hero of heroes"

注意语法的*号。

<li *ngFor="let hero of heroes$ | async" ></li>

$是命名习惯，说明是Observeable，带上管道 | async就不用在组件内订阅了

事件绑定

(click)=onSelect(hero)

判断是否显示

<div *ngIf="selectedHero">

一样注意*号。

绑定可选样式

[class.selected]="hero === selectedHero"

传参与取参

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

@Input() hero: Hero;

[hero]为属性绑定语法。

@Input为输入参数，单向数据流。

---

服务ts

装饰器

@Injectable({
  providedIn: 'root', // 相当于Vuex中的path
})

指定服务注入对象

ng generate service hero --module=app

可观察数据

Observable Data

// 服务
import { Observable, of } from 'rxjs';

getHeroes(): Observable<Hero[]> {
  return of(HEROES);
}

// 获取
getHeroes(): void {
  this.heroService.getHeroes()
      .subscribe(heroes => this.heroes = heroes);
}

Observeable的管道方法：

this.heroes$ = this.searchTerms.pipe(
  // wait 300ms after each keystroke before considering the term
  debounceTime(300),

  // ignore new term if same as previous term
  distinctUntilChanged(),

  // switch to new search observable each time the term changes
  switchMap((term: string) => this.heroService.searchHeroes(term)),
)

服务注入组件

constructor(private messageService: MessageService) { } // 私有，html不可用

constructor(public messageService: MessageService) { } // 公开，html可用

RxJS

// 提供可观察数据
getHeroes(): Observable<Hero[]> {
  return of(HEROES);
}

// 订阅服务中的可观察数据
getHeroes(): void {
  this.heroService.getHeroes()
      .subscribe(heroes => this.heroes = heroes);
}

---

路由

生成

ng generate module app-routing --flat --module=app

–flat 表明放在src/app下面，不用单独创建文件夹。

–module=app，表示注册到AppModule的imports中。

实例模板

// 路由ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroesComponent }      from './heroes/heroes.component';
import { DashboardComponent }   from './dashboard/dashboard.component';
import { HeroDetailComponent }  from './hero-detail/hero-detail.component';

const routes: Routes = [ // 路由数组
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'detail/:id', component: HeroDetailComponent },
  { path: 'heroes', component: HeroesComponent },
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ], // 这里注入路由数组
  exports: [ RouterModule ], // 注入后的导出
})
export class AppRoutingModule { }

路由标签

<router-outlet></router-outlet> 路由点

<a routerLink="/detail/{{hero.id}}"></a> 路由a标签，注意routerLink

被路由页配置

import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';

constructor(
    private route: ActivatedRoute, // 路由实例
    private heroService: HeroService,
    private location: Location // 路由控制
  ) { }

// route.snapshot 是一个路由信息的静态快照，抓取自组件刚刚创建完毕之后。
const id = +this.route.snapshot.paramMap.get('id'); // 获取路由参数

this.location.back(); // 路由返回

ActivatedRoute 保存着到这个 HeroDetailComponent 实例的路由信息。 这个组件对从 URL 中提取的路由参数感兴趣。 其中的 id 参数就是要现实的英雄的 id。

location 是一个 Angular 的服务，用来与浏览器打交道。 稍后，你就会使用它来导航回上一个视图。

---

欢迎关注，如有需要 Web，App，小程序，请留言联系。