angular - Angular 5/6:组件接口 - 可能吗?
问题描述
这就是我想要完成的事情:创建一个组件来包裹 MatStepper,它将接受 2..n 个步骤,每个步骤都有自己的组件。
话虽如此,我知道如何在其他语言中做到这一点的方式是创建一个具有常见行为的接口,并在不同的组件中实现它,但在包装器组件中使用该接口。
向导-step.component.ts
export interface WizardStep {
isValid: boolean;
nextClicked(e);
previousClicked(e);
}
向导.component.ts
import { Component, Input, OnInit, ViewChild } from '@angular/core';
import { ProgressBarType } from '../progress-bar/ProgressBarType';
import { MatStepper } from '@angular/material';
import { WizardStep } from './wizard-step.component';
@Component({
selector: 'app-wizard',
templateUrl: './wizard.component.html',
styleUrls: [ './wizard.component.css' ]
})
export class WizardComponent implements OnInit {
progress: number;
progressBarType = ProgressBarType.Progress;
@Input() steps: WizardStep[] = [];
/**
* The material stepper instance.
*/
@ViewChild('stepper') private stepper: MatStepper;
constructor() {
}
ngOnInit() {
this.calculateProgress(0);
}
public calculateProgress(index: number): void {
this.progress = ((index + 1) / this.steps.length) * 100;
}
public next(e): void {
this.steps[e.selectedIndex].nextClicked(e);
}
public previous(e): void {
this.steps[e.selectedIndex].previousClicked(e);
}
public selectionChange(e):void {
this.calculateProgress(e.selectedIndex);
}
}
向导.component.html
<panel>
<progress-bar class="progress-margins" [progress]="progress" [type]="progressBarType"></progress-bar>
<mat-horizontal-stepper class="hide-header" #stepper (selectionChange)="selectionChange($event)">
<mat-step *ngFor="let step of steps">
<ng-container *ngComponentOutlet="step"></ng-container>
</mat-step>
</mat-horizontal-stepper>
<form-buttons
primaryLabel="Next"
(primaryButtonClicked)="stepper.next(); next($event)"
secondaryLabel="Previous"
(secondaryButtonClicked)="stepper.previous(); previous($event)">
</form-buttons>
</panel>
然后,我尝试通过为每个向导步骤创建一个包含一个组件的验证组件来使用此组件:
向导-validation.component.ts
import { Component, OnInit } from '@angular/core';
import { WizardStep } from 'framework';
import { WizardValidationStep1Component } from '../wizard-validation-step1/wizard-validation-step1.component';
import { WizardValidationStep2Component } from '../wizard-validation-step2/wizard-validation-step2.component';
import { WizardValidationStep3Component } from '../wizard-validation-step3/wizard-validation-step3.component';
@Component({
selector: 'app-wizard-validation',
templateUrl: './wizard-validation.component.html',
styleUrls: []
})
export class WizardValidationComponent implements OnInit {
steps: WizardStep[] = [];
constructor() {
}
ngOnInit() {
this.steps.push(WizardValidationStep1Component);
this.steps.push(WizardValidationStep2Component);
this.steps.push(WizardValidationStep3Component);
}
}
向导-validation.component.html
<wizard [steps]="steps">
</wizard>
最后,WizardValidationStep1Component、WizardValidationStep2Component和WizardValidationStep3Component在这一点上是相同的:
import { Component } from '@angular/core';
import { WizardStep } from 'framework';
@Component({
selector: 'app-wizard-validation-step1',
templateUrl: './wizard-validation-step1.component.html',
styleUrls: []
})
export class WizardValidationStep1Component implements WizardStep {
isValid: boolean;
stepName = 'Step 1';
constructor() {
this.isValid = true;
}
nextClicked(e) {
alert('Clicked next on ' + this.stepName);
}
previousClicked(e) {
alert('Clicked previous on ' + this.stepName);
}
}
使用Wizard-validation-step1.component.html:
<p>
wizard-validation-step1 works!
</p>
在wizard.component.ts中,如果我使用无类型数组而不是 WizardStep 数组,它可以很好地工作,但我的 step 组件当然不会注册点击等。
@Input() steps = [];
如上所示使用时,当我尝试运行时ng build
,我收到以下消息:
ERROR in src/app/wizard-validation/wizard-validation.component.ts(20,21): error TS2345: Argument of type 'typeof WizardValidationStep1Component' is not assignable to parameter of type 'WizardStep'.
Property 'isValid' is missing in type 'typeof WizardValidationStep1Component'.
src/app/wizard-validation/wizard-validation.component.ts(21,21): error TS2345: Argument of type 'typeof WizardValidationStep2Component' is not assignable to parameter of type 'WizardStep'.
Property 'isValid' is missing in type 'typeof WizardValidationStep2Component'.
src/app/wizard-validation/wizard-validation.component.ts(22,21): error TS2345: Argument of type 'typeof WizardValidationStep3Component' is not assignable to parameter of type 'WizardStep'.
Property 'isValid' is missing in type 'typeof WizardValidationStep3Component'.
我尝试使用的模式在 Angular 5/6 中有效吗?如果没有,是否有另一种方法来完成我想要做的事情?
解决方案
为什么不使用图书馆?这个很酷
如果库不是一个选项,我会创建一个自定义步骤指令并将步骤设置切换到 html 模板。
所以,而不是
// wizard.component.ts
ngOnInit() {
this.steps.push(WizardValidationStep1Component);
this.steps.push(WizardValidationStep2Component);
this.steps.push(WizardValidationStep3Component);
}
你会这样做
<!-- something-using-wizard.component.html -->
<my-wizard>
<my-step1-component myStep [someInput]="true"></my-step1-component>
<my-step2-component myStep [someOtherInput]="'foo'"></my-step2-component>
</my-wizard>
WizardComponent
并在使用@ContentChildren()
装饰器时抓住你的步骤实例
// wizard.component.ts
@ContentChildren(MyStepDirective)
public steps: QueryList<MyStepInterface>;
您可以在我链接的库的源代码中进一步启发自己。作者做了类似的事情......
我希望这对你有一点帮助:-)
推荐阅读
- javascript - 当我更改选择值时为空表单字段
- python-3.x - 在python中自动绘制水平条形图,按数据框中的列分组
- arrays - 无法从 Firestore SwiftUI 读取或正确读取数据
- firebase - Flutter 身份验证:一个 Firebase 项目中的多个 Flutter 应用程序
- java - VolleyError 带有 REST GET 请求的意外响应代码 406
- flutter - Flutter 改变 Textstyle
- python - 运行一个使用 paramiko ssh 到其他服务器并从 jenkins 执行数据库刷新的 python 脚本
- javascript - 在 React / Next js 中路由之前检查更改
- python - 尝试构建 discord.py [voice] 时路径中缺少“make”实用程序
- css - 如何横向展示我的产品卡片?