CSS3艺术:网页设计案例实战之angular实现二、章节目录导航实现

lxhjh

已于 2022-05-15 22:23:13 修改

阅读量265

点赞数

分类专栏： CSS3艺术文章标签： bootstrap 前端 angular css3

于 2022-05-15 22:16:19 首次发布

本文链接：https://blog.csdn.net/lxhjh/article/details/124787784

版权

本文通过实例详细讲解如何使用Angular结合CSS3在前端网页设计中创建章节目录导航。涉及到Angular模块和组件的修改，使用Bootstrap的栅格系统和折叠组件构建导航结构，同时提供CSS样式以实现良好的视觉效果。

摘要由CSDN通过智能技术生成

一、修改根模块

在src\app\app.module.ts中，导入数据源模块(ModelModule)，修改后的文件为

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ModelModule } from './model/model.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ModelModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

二、修改根组件的 ts

在src\app\app.component.ts中，声明章节数组，并在构造函数中注入数据源,修改后的文件为

import { Component } from '@angular/core';
import { Chapter } from './model/chapter.model';
import { StaticDataSource } from './model/static.data.source';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  public chapters: Chapter[] = [];
  constructor(private dataSource: S