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>