angular 学习日志
1、创建项目
npm install -g @angular/cli ng new my-app cd my-app ng serve --open // 或者 npm start
2、生成新模块
ng generate component heroes
3、引入双向绑定模块儿 app.module.ts 中添加
import { FormsModule } from '@angular/forms' // @NgModule 中 imports: [ BrowserModule, FormsModule ]
4、父组件和子组件的交互
父页面中:
<app-hero-detail [hero]="selectedHero" ></app-hero-detail>
子组件中:
import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-hero-detail', templateUrl: './hero-detail.component.html', styleUrls: ['./hero-detail.component.css'] }) export class HeroDetailComponent implements OnInit { @Input() hero constructor() { console.log('===>',this.hero) } ngOnInit() { } }
5、生成service
ng generate service hero //--module=app 限定service 作用的等级
6、类promise 更好的 “订阅”
// 生成 getHeros(){ return of([{ id: 1, age: 33, name: '小花' },{ id: 2, age: 33, name: '小花' },{ id: 3, age: 33, name: '小花' },{ id: 4, age: 33, name: '小花' },{ id: 5, age: 33, name: '小花' },{ id: 6, age: 33, name: '小花' }]) } // 订阅 this.hService.getHeros().subscribe(res=>{ this.heros = res; })
7、添加路由
// --flat 把这个文件放进了 src/app 中,而不是单独的目录中。 // --module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中。 ng generate module app-routing --flat --module=app // 修改src/app/app-routing.module.ts import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router' import {HerosComponent} from './heros/heros.component'; const routes: Routes = [ {path: 'heros',component:HerosComponent} ] @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } // 修改app.component.html 添加 <router-outlet></router-outlet>
<!-- routerLink方式 --> <div routerLink="/detail/{{h.id}}" *ngFor="let h of heroList" > {{h.name}} </div>
// 获取参数 this.route.snapshot.paramMap.get('id')
// 路由配置 写法 const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full' }, {path: 'heros',component:HerosComponent}, {path: 'detail/:id',component:HeroDetailComponent}, {path: 'home',component:DashboardComponent} ]
8、HttpClient
// 引入 httpClient import { HttpClient, HttpHeaders } from '@angular/common/http'; // Service 中 private heroesUrl = 'api/heroes'; // URL to web api const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) }; /** * Handle Http operation that failed. * Let the app continue. * @param operation - name of the operation that failed * @param result - optional value to return as the observable result */ private handleError<T> (operation = 'operation', result?: T) { return (error: any): Observable<T> => { // TODO: send the error to remote logging infrastructure console.error(error); // log to console instead // TODO: better job of transforming error for user consumption this.log(`${operation} failed: ${error.message}`); // Let the app keep running by returning an empty result. return of(result as T); }; } constructor( private http: HttpClient, private messageService: MessageService) { } /** GET heroes from the server */ getHeroes (): Observable<Hero[]> { return this.http.get<Hero[]>(this.heroesUrl) .pipe( tap(heroes => this.log(`fetched heroes`)), catchError(this.handleError('getHeroes', [])) ); } /** POST: add a new hero to the server */ addHero (hero: Hero): Observable<Hero> { return this.http.post<Hero>(this.heroesUrl, hero, httpOptions).pipe( tap((hero: Hero) => this.log(`added hero w/ id=${hero.id}`)), catchError(this.handleError<Hero>('addHero')) ); } //
9、 搜索请求的处理 及 异步请求的 处理
控制器:
import { Component, OnInit } from '@angular/core'; import { Observable, Subject } from 'rxjs'; import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators'; import { Hero } from '../hero'; import { HeroService } from '../hero.service'; @Component({ selector: 'app-hero-search', templateUrl: './hero-search.component.html', styleUrls: [ './hero-search.component.css' ] }) export class HeroSearchComponent implements OnInit { heroes$: Observable<Hero[]>; private searchTerms = new Subject<string>(); constructor(private heroService: HeroService) {} // Push a search term into the observable stream. search(term: string): void { this.searchTerms.next(term); } ngOnInit(): void { 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
// 只会返回最近一次 http请求的数据,会取消之前请求队列 switchMap((term: string) => this.heroService.searchHeroes(term)), ); } }
html:
<div id="search-component"> <h4>Hero Search</h4> <input #searchBox id="search-box" (keyup)="search(searchBox.value)" /> <ul class="search-result"> <li *ngFor="let hero of heroes$ | async" > <a routerLink="/detail/{{hero.id}}"> {{hero.name}} </a> </li> </ul> </div>