angular使用ngx-vant组件库

简介: angular使用ngx-vant组件库
安装


首先去官网找到安装命令


yarn add ngx-vant or npm i ngx-vant


使用


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


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文件


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 { }
相关文章
|
7月前
|
JavaScript
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
|
5月前
|
前端开发 容器
前端框架与库 - Angular模块与依赖注入
【7月更文挑战第17天】探索Angular的模块化和依赖注入:模块用于组织组件、服务等,通过`@NgModule`声明。依赖注入简化类间依赖管理,但面临模块重复导入、服务作用域不当和依赖循环等问题。解决策略包括规划模块结构、正确设置服务作用域和使用工厂函数打破循环依赖。遵循最佳实践,构建高效、可维护的Angular应用。
69 17
|
4月前
|
JavaScript 测试技术
如何在 Angular 中使用 NgTemplateOutlet 创建可重用组件
如何在 Angular 中使用 NgTemplateOutlet 创建可重用组件
32 0
|
5月前
|
前端开发 JavaScript
前端框架与库 - Angular基础:组件、模板、服务
【7月更文挑战第16天】Angular,谷歌维护的前端框架,专注构建动态Web应用。组件是核心,包含行为逻辑的类、定义视图的模板和样式。模板语法含插值、属性和事件绑定。服务提供业务逻辑,依赖注入实现共享。常见问题涉及组件通信、性能和服务注入。优化通信、性能并正确管理服务范围,能提升应用效率和质量。学习组件、模板和服务基础,打造高效Angular应用。
71 1
|
6月前
|
JavaScript 小程序 API
技术经验分享:Angular动态创建组件之Portals
技术经验分享:Angular动态创建组件之Portals
|
7月前
快速创建Angular组件并定义传参、绑定自定义事件的方法
快速创建Angular组件并定义传参、绑定自定义事件的方法
|
7月前
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
|
JavaScript 定位技术
Angular1.x入门级自定义组件(导航条)
Angular1.x入门级自定义组件(导航条)
|
资源调度 JavaScript 容器
Angular封装WangEditor富文本组件
Angular封装WangEditor富文本组件
322 0
|
资源调度 前端开发 Java
使用Angular CDK实现一个Service弹出Toast组件
使用Angular CDK实现一个Service弹出Toast组件
137 0