手记

【前端骚操作】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,小程序,请留言联系。

0人推荐
随时随地看视频
慕课网APP