目标物 – mù wù

环境

Angular 7.0.5 可以这样表达：Angular 7.0.5 版本。

步骤1：安装包

使用 TechGapItalia/angular-vertical-timeline: 在 Angular 4+ 中使用的垂直时间轴组件。

在npm 的情况下

npm install angular-vertical-timeline --save

关于yarn的话

yarn add angular-vertical-timeline

第二步：在app.module.ts中添加定义。

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TimelineComponent } from './timeline/timeline.component';

// 外部モジュール
import { VerticalTimelineModule } from 'angular-vertical-timeline'; // 追記

@NgModule({
  declarations: [
    AppComponent,
    TimelineComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    VerticalTimelineModule // 追記
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA,
    NO_ERRORS_SCHEMA
  ]
})
export class AppModule { }

第三步。在styles.css文件中添加内容。

@import "~angular-vertical-timeline/dist/vertical-timeline.css";

第四步：在组件模板中追加内容。

<!-- Add the timeline -->
<vertical-timeline>

  <!-- Add some cards to the timeline. It works with *ngFor too -->

  <!-- If no value is passed for the date, the current time is used. -->
  <vertical-timeline-card>
    <h1>Today</h1>
  </vertical-timeline-card>

  <!-- tomorrow = new Date(2017, 9, 20, 14,34); -->
  <vertical-timeline-card [dateValue]="tomorrow">
    <h1>Tomorrow</h1>
  </vertical-timeline-card>

</vertical-timeline>