angular6开发steps步骤条组件

最新推荐文章于 2025-06-04 09:19:46 发布

原创

最新推荐文章于 2025-06-04 09:19:46 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

这篇博客详细介绍了如何在Angular6中开发步骤条组件。首先展示了步骤条的效果，接着通过angular命令创建组件，然后逐步解析steps.component的HTML、TS和CSS代码，最后讲解如何在项目中引用这个自定义组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1.先展示步骤条效果

在这里插入图片描述

2.使用angular命令快速创建组件

ng g c component/steps

创建的组件在component文件夹下面

在这里插入图片描述
打开steps.component.ts文件，可以看到selector的值是app-steps

import {
   
    Component, OnInit} from '@angular/core';

@Component({
   
   
  selector: 'app-steps',
  templateUrl: './steps.component.html',
  styleUrls: ['./steps.component.css']
})
export class StepsComponent implements OnInit {
   
   
  constructor() {
   
    }
  ngOnInit() {
   
    }
}

3.代码

steps.component.html

<div class="steps">
  <ul class="lineUl">
    <li *ngFor="let item of stepsData; let i=index" [ngClass]="{
    
    'liWidth': i+1 == stepsData.length}">
      <div class="stepsIcon">
        <div class="radioSelect radioSelectDisabled" [ngClass]="{
    
    'radioSelectDisabled': i+1>active}"