ionic5/angular11里集成ng-zorro-antd-mobile(Ant Design Mobile of Angular)V4.0.0使用跑马灯UI

在ionic5项目里安装ng-zorro-antd-mobile

一、安装ng-zorro-antd-mobile。

执行npm/cnpm install ng-zorro-antd-mobile --save

二、在 app.modules.ts 中，全局引入 ng-zorro-antd-mobile。

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

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
//全局引入 ng-zorro-antd-mobile。
import { NgZorroAntdMobileModule } from 'ng-zorro-antd-mobile';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: 
  [BrowserModule,
     IonicModule.forRoot(),
      AppRoutingModule,
      NgZorroAntdMobileModule,
    ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

三、在 angular.json 中找到styles，全局引入 ng-zorro-antd-mobile样式。

"styles": [
              "node_modules/ng-zorro-antd-mobile/src/ng-zorro-antd-mobile.min.css"
              
            ],

四、在需要使用的地方引入，这里在tab1.module.ts里引入。

import { IonicModule } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Tab1Page } from './tab1.page';
import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';

import { Tab1PageRoutingModule } from './tab1-routing.module';
//需要使用ng-zorro-antd-mobile的地方引入
import { NgZorroAntdMobileModule } from 'ng-zorro-antd-mobile';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    ExploreContainerComponentModule,
    Tab1PageRoutingModule,
    NgZorroAntdMobileModule
  ],
  declarations: [Tab1Page]
})
export class Tab1PageModule {}

五、在tab1.page.html里编写代码，这里引入ant的跑马灯效果

<WingBlank>
      <WhiteSpace></WhiteSpace>
      <Carousel
        class="my-carousel"
        [autoplay]="true"
        [infinite]="true"
        [vertical]="true"
        [dots]="false"
        [dragging]="false"
      >
        <CarouselSlide *ngFor="let item of state.data">
          <div class="v-item">carousel {{ item }}</div>
        </CarouselSlide>
      </Carousel>
    </WingBlank>

六、tab1.page.scss

.my-carousel .v-item {
    height: 36px;
    line-height: 36px;
    padding-left: 10px;
  }

七、tab1.page.ts

state = {
    data: ['1', '2', '3']
  };
  constructor() {
  }

不知道怎么截取动态图，所以就不上图了。。。