Angular中是否有可实现指定组件的库？含Bootstrap、PrimeNG咨询

一、基于Bootstrap的实现 #

1. 步骤式向导（对应第一张图） #

Bootstrap没有内置向导组件，但可以用导航、表单组件快速搭建，配合Angular的逻辑控制切换：

<!-- 步骤指示器 -->
<ul class="nav nav-pills mb-3">
  <li class="nav-item">
    <a class="nav-link {{currentStep === 1 ? 'active' : ''}}" (click)="currentStep = 1">步骤1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link {{currentStep === 2 ? 'active' : ''}}" (click)="currentStep = 2">步骤2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link {{currentStep === 3 ? 'active' : ''}}" (click)="currentStep = 3">步骤3</a>
  </li>
</ul>

<!-- 步骤内容区域 -->
<div class="card">
  <div class="card-body" *ngIf="currentStep === 1">
    <h5>基本信息</h5>
    <form>
      <div class="mb-3">
        <label class="form-label">姓名</label>
        <input type="text" class="form-control">
      </div>
      <button type="button" class="btn btn-primary" (click)="currentStep = 2">下一步</button>
    </form>
  </div>
  <div class="card-body" *ngIf="currentStep === 2">
    <h5>详细信息</h5>
    <form>
      <div class="mb-3">
        <label class="form-label">地址</label>
        <input type="text" class="form-control">
      </div>
      <button type="button" class="btn btn-secondary" (click)="currentStep = 1">上一步</button>
      <button type="button" class="btn btn-primary" (click)="currentStep = 3">下一步</button>
    </form>
  </div>
  <div class="card-body" *ngIf="currentStep === 3">
    <h5>确认信息</h5>
    <p>请确认所有信息填写正确</p>
    <button type="button" class="btn btn-secondary" (click)="currentStep = 2">上一步</button>
    <button type="button" class="btn btn-success">提交</button>
  </div>
</div>

组件TS代码：

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

@Component({
  selector: 'app-bootstrap-wizard',
  templateUrl: './bootstrap-wizard.component.html',
  styleUrls: ['./bootstrap-wizard.component.css']
})
export class BootstrapWizardComponent {
  currentStep = 1;
}

2. 标签页切换（对应第二张图） #

用Bootstrap的标签组件配合Angular的*ngIf控制显示：

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link {{currentTab === 'tab1' ? 'active' : ''}}" (click)="currentTab = 'tab1'">标签1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link {{currentTab === 'tab2' ? 'active' : ''}}" (click)="currentTab = 'tab2'">标签2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link {{currentTab === 'tab3' ? 'active' : ''}}" (click)="currentTab = 'tab3'">标签3</a>
  </li>
</ul>
<div class="tab-content mt-3">
  <div *ngIf="currentTab === 'tab1'">
    <p>标签1的内容区域</p>
  </div>
  <div *ngIf="currentTab === 'tab2'">
    <p>标签2的内容区域</p>
  </div>
  <div *ngIf="currentTab === 'tab3'">
    <p>标签3的内容区域</p>
  </div>
</div>

组件TS代码：

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

@Component({
  selector: 'app-bootstrap-tabs',
  templateUrl: './bootstrap-tabs.component.html',
  styleUrls: ['./bootstrap-tabs.component.css']
})
export class BootstrapTabsComponent {
  currentTab = 'tab1';
}

二、基于PrimeNG的实现 #

PrimeNG有现成的组件封装，无需自己写太多逻辑：

1. 步骤式向导（对应第一张图）：使用Steps组件 #

先确保PrimeNG已安装：npm install primeng
组件代码：

<p-steps [model]="stepItems" [(activeIndex)]="activeStep" />

<div class="card mt-3">
  <div *ngIf="activeStep === 0">
    <h5>基本信息</h5>
    <form>
      <div class="mb-3">
        <label>姓名</label>
        <input type="text" pInputText class="w-full">
      </div>
      <button pButton type="button" label="下一步" (click)="activeStep++"></button>
    </form>
  </div>
  <div *ngIf="activeStep === 1">
    <h5>详细信息</h5>
    <form>
      <div class="mb-3">
        <label>地址</label>
        <input type="text" pInputText class="w-full">
      </div>
      <button pButton type="button" label="上一步" (click)="activeStep--" class="mr-2"></button>
      <button pButton type="button" label="下一步" (click)="activeStep++"></button>
    </form>
  </div>
  <div *ngIf="activeStep === 2">
    <h5>确认信息</h5>
    <p>请确认所有信息正确</p>
    <button pButton type="button" label="上一步" (click)="activeStep--" class="mr-2"></button>
    <button pButton type="button" label="提交" class="bg-green-500"></button>
  </div>
</div>

组件TS代码：

import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/api';
import { StepsModule } from 'primeng/steps';
import { ButtonModule } from 'primeng/button';
import { InputTextModule } from 'primeng/inputtext';

@Component({
  selector: 'app-prime-wizard',
  templateUrl: './prime-wizard.component.html',
  styleUrls: ['./prime-wizard.component.css'],
  imports: [StepsModule, ButtonModule, InputTextModule]
})
export class PrimeWizardComponent implements OnInit {
  stepItems: MenuItem[] = [];
  activeStep = 0;

  ngOnInit() {
    this.stepItems = [
      { label: '步骤1' },
      { label: '步骤2' },
      { label: '步骤3' }
    ];
  }
}

2. 标签页切换（对应第二张图）：使用TabView组件 #

直接用PrimeNG封装好的标签组件，自带样式和切换逻辑：

<p-tabView>
  <p-tabPanel header="标签1">
    <p>标签1的内容区域</p>
  </p-tabPanel>
  <p-tabPanel header="标签2">
    <p>标签2的内容区域</p>
  </p-tabPanel>
  <p-tabPanel header="标签3">
    <p>标签3的内容区域</p>
  </p-tabPanel>
</p-tabView>

组件TS代码：

import { Component } from '@angular/core';
import { TabViewModule } from 'primeng/tabview';

@Component({
  selector: 'app-prime-tabs',
  templateUrl: './prime-tabs.component.html',
  styleUrls: ['./prime-tabs.component.css'],
  imports: [TabViewModule]
})
export class PrimeTabsComponent { }

内容的提问来源于stack exchange，提问作者Junaid