首页 > 解决方案 > 如何创建一个下拉菜单作为语言选择器?角底

问题描述

我想使用 angular PrimeNG 作为我的网页语言选择器创建一个下拉列表。我已经使用 Angular 材质创建了,但这次我想使用 PrimeNG 进行创建。

工具栏.component.html <p-dropdown [options]="lang" [(ngModel)]="selectedLang" optionLabel="name" optionValue="code" (change)="changeLang('code')"></p-dropdown>

工具栏.component.ts

import { Component, OnInit } from '@angular/core';


interface Language {
  name: string,
  code: string
}


@Component({
  selector: 'app-toolbar',
  templateUrl: './toolbar.component.html',
  styleUrls: ['./toolbar.component.scss']
})
export class ToolbarComponent implements OnInit {

  lang: Language[];

  selectedLang: Language | undefined;

  constructor(private translateConfigService: TranslateConfigService) { 
    
    this.lang = [
      {name: 'English', code: 'en',},
      {name: '日本語', code: 'jp'}
  ];
  }

  ngOnInit(): void {
    
  }

  changeLang(type: string){
    this.translateConfigService.changeLanguage(type);
  }

} ```

标签: angulartypescriptprimengweb-frontendprimeng-dropdowns

解决方案


推荐阅读