Angualr cdk 学习之 Stepper
cdk Stepper 让我们能够更好的处理类似于工作流的情况(任务分为多个步骤，上一步操作完成之后进入下一步的操作，比如咱们休假申请单要经过多个领导的审批的情况)。
还是和之前cdk 里面其他功能模块一样，要使用Stepper 需provider CdkStepperModule的。
import {CdkStepperModule} from '@angular/cdk/stepper';
cdk Stepper看起来复杂其实里面的东西不是很多。整个Stepper都是围绕一个组件CdkStep(cdk-step)和6个指令(CdkStepper、CdkStepLabel、CdkStepperNext、CdkStepperPrevious、CdkStepHeader)来展开的。咱们上面不是说了么，cdk Stepper一般用来处理多个步骤任务。这里每个任务的内容用CdkStep组件来表示，所以有多少个步骤就会 有多少个CdkStep组件。CdkStepper指令呢则是用来管理这些组件比如跳到下一步，上一步，完成等等(所以cdk Stepper使用的时候我们需要另外定义一个组件继承自CdkStepper指令，我们可以把他当做是工作流组件)。CdkStepperNext、CdkStepperPrevious两个指令正好对应上一步下一步，一般会添加在button上面包含在CdkStep组件里面，因为每个步骤都可能有上一步，下一步这样的。CdkStepLabel指令则是对每一个步骤的描述你也可以认为是每个步骤的标题。CdkStepHeader指令一般则是用来表示当前进行到哪一步了。一般也是会自定义一个组件继承CdkStepHeader实现。
一 CdkStep
CdkStep其实是一个组件来着。表示每个步骤的内容。所以任务有多少步就会有多少个CdkStep。比如如下代码有两个步骤所以有两个CdkStep(cdk-step)：
<h1>cdk stepper</h1>
<yx-stepper>
<cdk-step [stepControl]="frmStep1" #step1="cdkStep">
<ng-template cdkStepLabel>第一步</ng-template>
<form #frmStep1="ngForm">
<input type="text" name="a" value="a"/>
</form>
<button style="margin: 8px" cdkStepperNext type="button">下一步</button>
</cdk-step>
<cdk-step cdkStep #step2="cdkStep">
<ng-template cdkStepLabel>第二步</ng-template>
<form #frmStep2="ngForm">
<input type="text" name="b" value="b"/>
</form>
<button cdkStepperPrevious type="button">上一步</button>
<button style="margin: 8px" cdkStepperNext type="button">完成</button>
</cdk-step>
</yx-stepper>
每个CdkStep组件里面的内容对应每个步骤的内容。
Selector: cdk-step
Exported as: cdkStep
1.1 CdkStep组件属性
| 属性 | 内容 | 解释 |
|---|---|---|
| ariaLabel: string | @Input('aria-label') | 添加aria-label属性 |
| ariaLabelledby: string | @Input('aria-labelledby') | 添加aria-labelledby属性 |
| completed: boolean | @Input() | 当前步骤是否标记为完成状态 |
| editable: boolean | @Input() | 当前步骤标记为完成之后，是否还可以回到该步骤 |
| errorMessage: string | @Input() | 错误信息 |
| hasError: boolean | @Input() | 是否有错误 |
| label: string | @Input() | 当前步骤对应的label,和cdkStepLabel指令的作用是一样的(可以简单的把他认为是步骤的标题) |
| optional: boolean | @Input() | 当前步骤是否是可选的 |
| state: StepState | @Input() | 当前步骤的状态 |
| stepControl: AbstractControl | @Input() | 用于验证当前步骤的合法性 |
| content: TemplateRef<any> | 当前步骤 试图元素内容 | |
| interacted: false | 用户是否看到当前步骤内容 | |
| stepLabel: CdkStepLabel | 当前步骤label内容 |
1.2 CdkStep组件方法
export declare class CdkStep implements OnChanges {
...
/** 选中当前步骤(select哪个步骤则选中那个步骤) */
select(): void;
/** 设置当前步骤到无效状态 */
reset(): void;
...
}
CdkStep组件里面大部分的方法都需要配合我们下面要讲的CdkStepper指令来使用
二 CdkStepper
CdkStepper是一个指令，用来管理所有的步骤，即CdkStepper是用来管理CdkStep组件的。一般的做法是自定义一个组件继承CdkStepper指令。并且CdkStep组件是这个组件的子组件。比如如下的代码我们定义一个StepperComponent组件继承CdkStepper指令：
import {
AfterContentInit,
ChangeDetectionStrategy,
Component,
ContentChildren,
EventEmitter,
Output,
QueryList,
ViewEncapsulation
} from '@angular/core';
import {AnimationEvent} from '@angular/animations';
import {CdkStep, CdkStepper, StepContentPositionState} from '@angular/cdk/stepper';
import {Subject} from 'rxjs';
import {distinctUntilChanged, takeUntil} from 'rxjs/operators';
import {yxStepperAnimations} from './stepper-animations';
@Component({
selector: 'yx-stepper',
templateUrl: './stepper.component.html',
styleUrls: ['./stepper.component.less'],
providers: [{provide: CdkStepper, useExisting: StepperComponent}],
animations: [yxStepperAnimations.horizontalStepTransition],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class StepperComponent extends CdkStepper implements AfterContentInit {
/** Steps that the stepper holds. */
@ContentChildren(CdkStep) _steps: QueryList<CdkStep>;
/** Event emitted when the current step is done transitioning in. */
@Output() readonly animationDone: EventEmitter<void> = new EventEmitter<void>();
_animationDone = new Subject<AnimationEvent>();
ngAfterContentInit() {
// Mark the component for change detection whenever the content children query changes
this._steps.changes.pipe(takeUntil(this._destroyed)).subscribe(() => this._stateChanged());
this._animationDone.pipe(
// This needs a `distinctUntilChanged` in order to avoid emitting the same event twice due
// to a bug in animations where the `.done` callback gets invoked twice on some browsers.
// See https://github.com/angular/angular/issues/24084
distinctUntilChanged((x, y) => x.fromState === y.fromState && x.toState === y.toState),
takeUntil(this._destroyed)
).subscribe(event => {
if ((event.toState as StepContentPositionState) === 'current') {
this.animationDone.emit();
}
});
}
}
Selector: [cdkStepper]
Exported as: cdkStepper
2.1 CdkStepper属性
| 属性 | 类型 | 解释 |
|---|---|---|
| linear: boolean | @Input() | 任务流是否是线性的，前一个任务完成才能进行下一个任务 |
| selected: CdkStep | @Input() | 当前选中的任务 |
| selectedIndex: number | @Input() | 当前选中任务的index |
| selectionChange: EventEmitter<StepperSelectionEvent> | @Output() | 选中任务改变时候的回调函数 |
2.2 CdkStepper方法
export declare class CdkStepper implements AfterViewInit, OnDestroy {
...
/** 切换到下一个任务 */
next(): void;
/** 切换到上一个任务 */
previous(): void;
/** 重置所有的任务 */
reset(): void;
...
}
关于CdkStepper的使用更加详细的任务可以参考下下文中代码链接。
三 CdkStepLabel
指令，每个步骤需要显示的label内容，比如如下代码<ng-template cdkStepLabel>第一步</ng-template>部分就是某个任务的label。
<cdk-step [stepControl]="frmStep1" #step1="cdkStep">
<ng-template cdkStepLabel>第一步</ng-template>
<form #frmStep1="ngForm">
<input type="text" name="a" value="a"/>
</form>
<button style="margin: 8px" cdkStepperNext type="button">下一步</button>
</cdk-step>
Selector: [cdkStepLabel]
四 CdkStepperNext
添加在button上的指令，跳到下一个任务。
Selector: button[cdkStepperNext]
五 CdkStepperPrevious
添加在button上的指令，跳到上一个任务。
Selector: button[cdkStepperPrevious]
六 CdkStepHeader
指令，每个任务的头部信息，任务指示器。
关于cdk Stepper部分的内容好像也没啥讲的，关键点就在咱们继承CdkStepper的组件怎么来写了，怎么来管理这些workflow里面的任务。所以最最重要的在代码实现部分。为了能让大家更加直观的知道cdk Stepper怎么使用，这里我就直接写了一个非常简单的例子。有兴趣的大家可以看看例子里面是怎么做到的 https://github.com/tuacy/angular-cdk-study cdk stepper部分内容在workflow-stepper文件下面。实现效果图如下：
stepper.gif
