Angular PrimeNG SplitButton组件

Angular PrimeNG是一个与angular一起使用的框架，用于创建具有出色风格的组件，这个框架非常容易使用，用于制作响应式网站。

在这篇文章中，我们将看到如何在angular primeNG中使用SplitButton组件。SplitButton组件是用来把一个按钮做成下拉式的。

属性:

label：它是按钮的文本。它的数据类型为字符串，默认值为空。
icon：它是图标的名称。它是字符串数据类型，默认值为空。
iconPos：它是图标的位置。它是字符串数据类型，默认值为空。
style。它是组件的内联风格。它是字符串数据类型，默认值为空。
styleClass。它是组件的风格类。它是字符串数据类型，默认值为空。
menuStyle。它是叠加菜单的内联风格。它是字符串数据类型，默认值为空。
menuStyleClass。它是叠加菜单的风格类。它是字符串数据类型，默认值为空。
appendTo。它是用于附加叠加的目标元素。它是字符串数据类型，默认值为空。
disabled：它指定该组件应该被禁用。它是布尔数据类型，默认值是false。
tabindex。它是该元素在标签顺序中的索引。它的数据类型为数字，默认值为空。
dir: 它表示元素的方向。它是字符串数据类型，默认值为空。
showTransitionOptions。这些是显示动画的过渡选项。它是字符串数据类型，默认值为空。
hideTransitionOptions。这些是隐藏动画的过渡选项。它的数据类型是字符串，默认值是空。

事件:

onClick。它是默认命令按钮被点击时调用的回调。
onDropdownClick。它是当下拉按钮被点击时要调用的回调。

样式:

p-splitbutton。它是容器元素。
p-splitbutton-menubutton。它是下拉式按钮。
p-菜单。它是叠加菜单

创建Angular应用程序并安装模块：

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：在创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步：在你给定的目录中安装PrimeNG。

npm install primeng --save
npm install primeicons --save

项目结构。它将看起来像以下。

Angular PrimeNG SplitButton组件

例子：这是一个基本的例子，展示了如何使用SplitButton组件。

<h2>GeeksforGeeks</h2>
<h5>PrimeNG SplitButton Component</h5>
<p-splitButton label="GeeksforGeeks" [model]="gfg"></p-splitButton>

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {RouterModule} from '@angular/router';
import {BrowserAnimationsModule} 
        from '@angular/platform-browser/animations';
  
import { AppComponent }   from './app.component';
  
import { SplitButtonModule } from 'primeng/splitbutton';
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    SplitButtonModule,
    RouterModule.forRoot([
      {path:'',component: AppComponent}
        ])
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
  
export class AppModule { }

import { Component, OnInit, ViewEncapsulation} 
    from '@angular/core';
import {MenuItem} from 'primeng/api';
import {MessageService} from 'primeng/api';
  
@Component({
  selector: 'app-root',
  providers: [MessageService],
  templateUrl: './app.component.html',
  styles: [`
      :host ::ng-deep .ui-splitbutton {
          margin-right: .25em;
      }
  `]
})
export class AppComponent { 
    gfg: MenuItem[];
      
    constructor(private messageService: MessageService) {}
      
    ngOnInit() {
        this.gfg = [
            {label: 'Angular'},
            {label: 'PrimeNG'},
            {label: 'SplitButton'}
        ];
    }
}

输出:

Angular PrimeNG SplitButton组件