一开始我想说我知道有准备好使用 CDK 或 Materials 的步进器,但我想创建“我自己的”以学习 Angular 8。
老实说,我不知道现在应该在哪里寻求帮助,这就是我决定在这里写的原因。也许有人给我一些建议,我会在最后发表我的作品。
让我们开始吧:索引 HTML 代码如下所示:
<stepper>
<step>
<ng-template step-label>First name</ng-template>
<input placeholder="First name" required>
<div>
<button >Next</button>
</div>
</step>
<step>
<ng-template step-label>Last name</ng-template>
<input placeholder="Last name" required>
<div>
<button >Next</button>
</div>
</step>
<step>
<ng-template step-label>Address name</ng-template>
<input placeholder="Address" required>
<div>
<button >Next</button>
</div>
</step>
</stepper>
组件+指令
@Directive({selector: '[step-label]'})
export class StepLabel{
constructor(public template: TemplateRef<any>){};
}
@Component({selector: 'step-header', templateUrl: 'step-header.html'})
export class StepHeader{
@Input() label: TemplateRef<StepLabel>;
}
@Component({
selector: 'step',
template: '<ng-template><ng-content></ng-content></ng-template>'
})
export class Step{
@ViewChild(TemplateRef, {static: true}) content: TemplateRef<Step>;
@ContentChild(StepLabel, {static: true}) label: TemplateRef<StepLabel>;
}
@Component({selector: 'stepper', templateUrl: './stepper.html'})
export class Stepper implements AfterContentInit {
stepsArray = [];
@ContentChildren(Step) steps: QueryList<Step>;
ngAfterContentInit() {
this.stepsArray = this.steps.toArray();
}
}
步进器.html
<div class="header-steps" style="bordeR: 1px solid green; padding: 10px;">
<ng-container *ngFor="let step of stepsArray; let i = index; let isLast = last">
<step-header [label]="step.label"></step-header>
</ng-container>
</div>
<div style="border: 1px solid blue; padding: 5px; margin: 5px;" class="content-steps">
<div *ngFor="let step of stepsArray; let i = index">
<ng-container *ngIf="step" [ngTemplateOutlet]="step.content"></ng-container>
</div>
</div>
步骤=header.html
<div class="step-label">
<ng-container *ngIf="label" [ngTemplateOutlet]="label.template"></ng-container>
</div>
我已经更新了整个“基本”项目。有用。我有一个问题。为什么在指令 StepLabel 中必须是构造函数。我试图添加一些这样的想法:
@ViewChild(TemplateRef, {static: true}) template: TemplateRef<StepLabel>;
但它不起作用。