要实现“Angular Mat Stepper 仅启用当前活动导航和已完成导航”的功能,可以使用MatStepper组件的disableRipple和disableRipple两个属性来禁用非活动和未完成的导航。
首先,确保已经安装了Angular Material库,并导入MatStepperModule。
npm install @angular/material
在app.module.ts文件中导入MatStepperModule。
import { MatStepperModule } from '@angular/material/stepper';
@NgModule({
imports: [
...
MatStepperModule
],
...
})
export class AppModule { }
然后,在你的组件模板中,使用MatStepper组件,并设置disableRipple和disableRipple属性。
Step 1
Step 1 content
Step 2
Step 2 content
Step 3
Step 3 content
在上面的示例中,第一个步骤被禁用(disabled),而第二和第三个步骤是活动的。这样,只有当前活动的步骤和已完成的步骤才能被点击和导航。
希望这可以帮助到你!