# concat
創建一個輸出Observable,它從當前Observable之后的每個給定輸入Observable中順序發出所有值。
**方法簽名**:
```
// 靜態方法
public static concat(input1: ObservableInput, input2: ObservableInput, scheduler: Scheduler): Observable
// 實例方法
public concat(other: ObservableInput, scheduler: Scheduler): Observable
```
**示例**:
```javascript
var timer1 = Rx.Observable.interval(1000).take(2);
var timer2 = Rx.Observable.interval(2000).take(3);
var timer3 = Rx.Observable.interval(500).take(2);
var result = timer1.concat(timer2, timer3);
result.subscribe(x => console.log(x));
```
**結果**:
```
0 1 0 1 2 0 1
```
**分析**:
`concat`操作符功能很簡單,很容易理解,只有上一個Observable完成后才會執行后續Observable。
## concatAll
通過按順序連接內部的可觀察值,將高階Observable轉換為一階Observable。
>[warning] 如果外部Observable比內部Observable數據流以更快的速度發出時,這里可能會涉及到[背壓(backpressure)](http://www.hmoore.net/wujie520303/angular2_note/347371)問題。
>[info] 注意:`concatAll`等效于`mergeAll`,并發參數設置為1。
**方法簽名**:
```javascript
public concatAll(): Observable
```
**示例一**
```javascript
const source = Rx.Observable.interval(2000);
const example = source
.map(val => Rx.Observable.of(val + 10))
.concatAll();
example.subscribe(console.log);
```
**結果**:
```
10 11 12 13 14 15 16 17 18 19 20 ...
```
**分析**:
調用`concatAll`后,它會在上一個Observable對象完成訂閱后訂閱下一個Observable對象。這 里第一次執行得到結果`10`,然后2秒后source發出第二個值`1`,調用`map`后得到`11`,然后重復整個過程,直到外部Observable結束。
**示例二**
```javascript
const a = Rx.Observable.interval(1000).take(5);
const b = Rx.Observable.interval(1000).take(2);
const c = Rx.Observable.interval(1000).take(3);
const source = Rx.Observable.of(a, b, c);
const example = source.concatAll();
example.subscribe(console.log);
```
**結果**:
```
0 1 2 3 4 0 1 0 1 2
```
## ConcatMap
**方法簽名**
```javascript
public concatMap(project: function(value: T, ?index: number): ObservableInput, resultSelector: function(outerValue: T, innerValue: I, outerIndex: number, innerIndex: number): any): Observable
```
- 說明
- angular 1.x
- ngModelController
- ngOptions
- ngModelOptions
- lifecycle
- directive
- angular 2
- @angular/forms
- 類
- AbstractControl
- AbstractControlDirective
- AbstractFormGroupDirective
- FormControl
- FormArray
- FormBuilder
- FormGroup
- NgControl
- 接口
- controlValueAccessor
- 指令
- DefaultValueAccessor
- Angular 2 生命周期
- OnInit
- DoCheck
- @angular/router
- 配置
- Routes
- 指令
- RouterOutlet
- RouterLink
- 接口
- ActivatedRoute
- UrlTree
- NavigationExtras
- ActivatedRouteSnapshot
- RouterStateSnapshot
- 類
- UrlSegment
- UrlSegmentGroup
- UrlSerializer
- DefaultUrlSerializer
- Router
- bug記得
- @angular/http
- 類
- Http
- Body
- Response
- ResponseOptions
- Header
- Request
- RequestOptions
- URLSearchParams
- @angular/core
- decorator
- Component-decorator
- animation
- DI
- linker
- TemplateRef
- ElementRef
- EmbeddedViewRef
- ViewRef
- ViewContainerRef
- Query
- ComponentFactory
- ComponentRef
- Renderer
- change_detection
- KeyValueDiffers
- IterableDiffers
- ChangeDetectorRef
- ChangeDetectionStrategy
- Zone
- ngZone
- @angular/common
- 指令
- NgTemplateOutlet
- QueryList
- bootstrap4
- card
- form
- 重點關注博客
- 學習過的文章
- 筆記
- Angular 2 雙向綁定
- 將字符串解析成DOM
- rx相關
- operators
- combineLatest
- combineAll
- concat(All, Map, *MapTo)
- 背壓(backpressure)
- js事件keycode對應表
- 裝飾器
- 有用的代碼摘錄
- 日期操作
- 數量操作
- 字符操作
- rxjs問題
- 小示例
- h5面試準備
- react
- 開發遇到的問題