繼學習筆記12以後，可以模擬向後端傳送get/post/put/delete請求了。在專案中，有乙個table，這個table的資料非常多，就好比現在的herolist，需要根據使用者輸入的資訊傳送給遠端伺服器，讓遠端伺服器通過這個資訊，返回搜尋結果。現在要檢索herolist中的資訊，就需要乙個輸入框，讓使用者輸入檢索的值，然後將這個值傳送給遠端伺服器（模擬），然後讓遠端伺服器（模擬）返回檢索的結果。
在這個方法中，當沒有搜素詞，則返回乙個空的陣列，當有搜尋詞的時候，在url中拼接上name
routerlink="/detail/}">
}
ng generate component hero-searchhero search
在模版檔案中，建立了keyup 事件，這個keyup事件繫結會呼叫該元件的search()方法，並傳入新的搜尋框的值。
*ngfor是在乙個名叫heroes$的列表上迭代，在這裡$是乙個命名慣例，用來表明heroes$是乙個observable，而不是陣列。
正常情況下，*ngfor是不能直接使用observable，此時，就要用到管道，利用管道字元（|），後面緊跟著乙個async，它表示 angular 的asyncpipe，asyncpipe會自動訂閱到observable，這樣你就不用再在元件類中訂閱了。
美化這個herosearch元件，修改herosearch的css檔案
.search-result li
.search-result li:hover
.search-result li a
.search-result li a:hover
.search-result li a:active
#search-box
ul.search-result
import from '@angular/core';
import from 'rxjs';
import from 'rxjs/operators';
import from '../hero';
import from '../hero.service';
@component()
export class herosearchcomponent implements oninit
// push a search term into the observable stream.
search(term: string): void
ngoninit(): void
}
注意，heroes$宣告為乙個observable
subject既是可觀察物件的資料來源，本身也是observable。可以像訂閱任何observable一樣訂閱subject。還可以通過呼叫它的next(value)方法往observable中推送一些值，就像search()方法中一樣。search()是通過對文字框的keystroke事件的事件繫結來呼叫的。
private searchterms = new subject();
search(term: string): void
每當使用者在文字框中輸入時，這個事件繫結就會使用文字框的值（搜尋詞）呼叫search()函式。searchterms變成了乙個能發出搜尋詞的穩定的流。
每當使用者擊鍵後就直接呼叫searchheroes()將導致建立海量的 http 請求，浪費伺服器資源並消耗大量網路流量。
應該怎麼做呢？ngoninit()往searchterms這個可觀察物件的處理管道中加入了一系列 rxjs 操作符，用以縮減對searchheroes()的呼叫次數，並最終返回乙個可及時給出英雄搜尋結果的可觀察物件（每次都是hero）。
this.heroes$ = this.searchterms.pipe(
debouncetime(300),
distinctuntilchanged(),
switchmap((term: string) => this.heroservice.searchheroes(term)),
);
借助 switchmap 操作符， 每個有效的擊鍵事件都會觸發一次httpclient.get()方法呼叫。 即使在每個請求之間都有至少 300ms 的間隔，仍然可能會同時存在多個尚未返回的 http 請求。
switchmap()會記住原始的請求順序，只會返回最近一次 http 方法呼叫的結果。 以前的那些請求都會被取消和捨棄。
注意，取消前乙個searchheroes()可觀察物件並不會中止尚未完成的 http 請求。 那些不想要的結果只會在它們抵達應用**之前被捨棄。
angular6 依賴注入 學習筆記
檔案目錄 得到的頁面 二.使用工廠和值提供器 把product2.component.ts中的provider屬性去掉 import from angular core import from share product.service import from share anotherproduc...
Angular6筆記之全域性元件
在使用 angular6 做專案的時候，元件只能在乙個模組內進行宣告，也就是說，在預設情況下，元件編寫完成後都得在某個模組先根據檔案路徑引入該元件，然後在 ngmodule 的引數 declarations 進行新增，就可以在該模組的其他元件中進行使用了，注意，只能是 該模組 中。那麼，問題來了，我...
Angular6筆記 動態設定頁面標題title
眾所周知，angular6非常適合建立單頁面應用的框架，所以angular6建立出來的專案是放在乙個頁面中的，這也導致了所有頁面的標題都是一樣的，那麼問題來了，怎麼修改某乙個頁面的標題呢？這裡需要介紹乙個知識點 title service title service 用於獲取和設定當前 html 文...