Question

我在尝试创建表单向导或步进度栏时单击下一步按钮我必须移动表单向导并单击上一步按钮我有在angular4中返回表单向导。我需要这样，见下图

我的pacaage.json String path="file://"+"image path"; for (String path : this.paths) { Glide.with(this.context).asBitmap().load("file://"+path).apply(RequestOptions.fitCenterTransform()).into(new SimpleTarget<Bitmap>(1080, 1920) { @Override public void onResourceReady(@NonNull Bitmap resource, @Nullable Transition<? super Bitmap> transition) { try { resource.compress(Bitmap.CompressFormat.JPEG, 85, new FileOutputStream(MasterFacade.getAppDir() + "temp/" + resource.hashCode() + ".jpg")); listener.onUpdate(progressMessage, processed.get()); } catch (FileNotFoundException e) { e.printStackTrace(); } } }); }

任何对我有用的帮助...... 提前致谢

Answer 1

实现表单向导的最佳方法之一是使用Angular Material Stepper。使用步进器的详细信息是here。

要使用材料，请先按以下步骤操作：

步骤1：安装Angular Material和Angular CDK

npm install --save @angular/material @angular/cdk

在终端中运行此命令。

步骤2：导入组件模块。在App.module.ts中导入所需的材料模块。

import {MatButtonModule, MatStepperModule,} from '@angular/material';

@NgModule({
  ...
  imports: [MatButtonModule, MatStepperModule,],
  ...
})
export class AppModule { }

在AppModule中导入所有必需的材质模块。可用选项为here

第3步：包含主题。包含主题是将所有核心和主题样式应用于您的应用程序所必需的。

如果您使用Angular CLI，请在styles.css中添加此内容

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

有关主题指南，请参阅this

步骤4（可选）：添加材质图标。它用于包含图标。

对于图标，请链接index.html中的以下样式表

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

找到所有可用的图标here

现在对于步进器或表单向导，这里是Stackblitz Demo

如何在角度4中创建表单向导

1 个答案: