带有标志和国家代码的 Angular 2 下拉菜单

Question

我的应用程序是通过 ng2 翻译进行国际化的，在我的登录页面中，我想要一个类似下拉菜单的东西，其中每个选项都有国旗和国家名称，是否可以安装一些东西来快速解决这个问题？ 或者也许有任何可以帮助我自己做的例子

Answer 1

我需要类似的功能。

为此，我创建了 ngx-flag-picker图书馆。

How to use

Add a link tag with flag-icon-css library to your index.html file.

Add NgxFlagPickerModule to your module in the import section.

After:

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

@Component({
  selector: 'app-root',
  template: `
    <ngx-flag-picker
      [selectedCountryCode]="selectedCountryCode"
      [countryCodes]="countryCodes"
      (changedCountryCode)="changeSelectedCountryCode($event)">
    </ngx-flag-picker>
    <h1>{{ selectedCountryCode }}</h1>
  `
})
export class AppComponent {
  selectedCountryCode = 'us';
  countryCodes = ['us', 'lu', 'de', 'bs', 'br', 'pt'];

  changeSelectedCountryCode(value: string): void {
    this.selectedCountryCode = value;
  }
}

链接:

• Npm

• Github

• Demo