Angular PrimeNG Focus Trap下拉

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，这个框架可用于制作响应式网站，非常方便。本文将向我们展示如何在Angular PrimeNG中使用Focus Trap Dropdown。我们还将了解代码示例中使用的各种属性及其语法。

Angular PrimeNG Focus Trap是用来在我们用tab键做tab时保持对某些DOM元素的关注。当从下拉菜单中选择任何值时，Focus Trap下拉菜单会聚焦在该元素上。

Angular PrimeNG Focus Trap Dropdown属性：

option。它指定了一个对象数组的变量名称，该数组的键为optionLabel，值为下拉项目名称。
optionLabel。它指定了用于存储下拉项目的对象数组的键名，作为值。
showClear：它指定了取消选择下拉值的十字图标。

语法:

<p-dropdown
    [options]="..."
    placeholder="..."
    optionLabel="..."
    [showClear]="true">
</p-dropdown>

创建Angular应用程序和模块安装。

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

ng new appname

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

cd appname

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

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

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

Angular PrimeNG 焦点陷阱下拉

要运行上述文件，请运行以下命令：

ng serve --save

例子1：下面的代码说明了Angular PrimeNG Focus Trap Dropdown的使用。

<div pFocusTrap class="card">
  <h2 style="color: green">GeeksforGeeks</h2>
  <h5>Angular PrimeNG Focus Trap Dropdown</h5>
    
  <p-dropdown
    [options]="courses"
    placeholder="Select a subject"
    optionLabel="courseName"
    [showClear]="false">
  </p-dropdown>
</div>

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
  
export class AppComponent {
    courses = [
      { courseName: 'DSA - Self Paced' },
      { courseName: 'Test Series' },
      { courseName: 'Interview Preparation' },
      { courseName: 'C++ STL' },
      { courseName: 'System Design' },
    ];
}

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from 
    '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { DropdownModule } from 'primeng/dropdown';
  
@NgModule({
    imports: [BrowserAnimationsModule, DropdownModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule {}

输出:

Angular PrimeNG 焦点陷阱下拉

示例2：下面是另一段代码，说明了Angular PrimeNG Focus Trap Dropdown与一些其他属性值和下拉项的使用。

<div pFocusTrap class="card">
  <h2 style="color: green">GeeksforGeeks</h2>
  <h5>Angular PrimeNG Focus Trap Dropdown</h5>
    
  <p-dropdown
    [options]="subjects"
    placeholder="Select a subject"
    optionLabel="name"
    [showClear]="true">
  </p-dropdown>
</div>

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    subjects = [
      { name: 'Data Structure' },
      { name: 'OOPs' },
      { name: 'Operating System' },
      { name: 'DBMS' },
      { name: 'Computer Networks' },
    ];
}

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from 
    '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { DropdownModule } from 'primeng/dropdown';
  
@NgModule({
    imports: [BrowserAnimationsModule, DropdownModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule {}

输出:

Angular PrimeNG 焦点陷阱下拉