前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >angular使用ngx-vant组件库

angular使用ngx-vant组件库

作者头像
世间万物皆对象
发布2024-03-20 20:03:57
1030
发布2024-03-20 20:03:57
举报
文章被收录于专栏:startstart
安装

首先去官网找到安装命令

yarn add ngx-vant or npm i ngx-vant

使用

单独创建一个ts文件,把ngx-vant的标签放到里面,这样就可以全局导入了

代码语言:javascript
复制
import { NgModule } from '@angular/core';

import { ButtonModule } from 'ngx-vant/button';
import { CellModule } from 'ngx-vant/cell';
import { CellGroupModule } from 'ngx-vant/cell-group';
import { IconModule } from 'ngx-vant/icon';
import { ImageModule } from 'ngx-vant/image';
import { RowModule } from 'ngx-vant/row';
import { ColModule } from 'ngx-vant/col';
import { FieldModule } from 'ngx-vant/field';
import { PickerModule } from 'ngx-vant/picker';
import { LoadingModule } from 'ngx-vant/loading';
import { PopupModule } from 'ngx-vant/popup';
import { ToastModule } from 'ngx-vant/toast';
import { NotifyModule } from 'ngx-vant/notify';
import { OverlayModule } from 'ngx-vant/overlay';
import { ProgressModule } from 'ngx-vant/progress';
import { StickyModule } from 'ngx-vant/sticky';
import { TagModule } from 'ngx-vant/tag';
import { NavBarModule } from 'ngx-vant/nav-bar';
import { TabsModule } from 'ngx-vant/tabs';
import { TabModule } from 'ngx-vant/tab';
@NgModule({
    declarations: [],
    imports: [
        ButtonModule,
        CellModule,
        CellGroupModule,
        IconModule,
        ImageModule,
        RowModule,
        ColModule,
        FieldModule,
        PickerModule,
        NotifyModule,
        LoadingModule,
        PopupModule,
        ToastModule,
        OverlayModule,
        ProgressModule,
        StickyModule,
        TagModule,
        NavBarModule,
        TabsModule,
        TabModule
    ],
    exports: [
        ButtonModule,
        CellModule,
        CellGroupModule,
        IconModule,
        ImageModule,
        RowModule,
        ColModule,
        FieldModule,
        PickerModule,
        NotifyModule,
        LoadingModule,
        PopupModule,
        ToastModule,
        OverlayModule,
        ProgressModule,
        StickyModule,
        TagModule,
        NavBarModule,
        TabsModule,
        TabModule
    ]
})
export class VantModule { }
挂载

在app.module.ts中挂在刚才创建的ts文件

代码语言:javascript
复制
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { VantModule } from './ui/vant.module';
@NgModule({
    declarations: [
        AppComponent,

    ],
    imports: [
        BrowserModule,
        FormsModule,
        BrowserAnimationsModule,
        VantModule
    ],
    providers: [
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2024-03-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 安装
  • 使用
  • 挂载
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档