Angular 2 Dropdown with flags and countrycode

Question

我的应用程序国际化与ng2翻译，并在我的登录页面我想要的东西像一个下拉菜单，其中每个选项都有国家国旗和国家名称，是否有东西安装，解决这个问题呢？ 或者可能有任何帮助我自己做的例子

Answer 1

您可以使用CountrySelect作为具有标志，country-isoCode和phoneCode值的国家/地区下拉菜单。

你可以通过这个链接：https://github.com/mrmarkfrench/country-select-js

要，你需要添加countrySelect.js和countrySelect.css在角应用程序中使用此，并使用jQuery("#nationality").countrySelect();

适用于输入控制使用

下面是我在我的应用程序中使用的代码。

journey-details.html

<form class="form-horizontal" (submit)="saveApplication(applicationform.value)" #applicationform="ngForm" *ngIf="application" novalidate> 
      <div class="form-group"> 
       <div class="col-sm-3 col-md-3 hidden-xs"> 
        <i class="fa fa-globe" aria-hidden="true"></i> 
        <label class="frmlable required-field bgorange">Nationality (As in passport)</label> 
       </div> 
       <div class="col-sm-9 col-md-4"> 
        <input class="form-control nationality-country enjoy-css" type="text" id="nationality"> 
       </div> 
      </div> 
</form> 

journey-details.ts

import { Component } from '@angular/core'; 
import { Router } from '@angular/router'; 
import { AjaxLoader } from '../shared/services/ajax-loader'; 
import { Country } from '../shared/models/country'; 
declare var jQuery: any; 

@Component({ 
    moduleId: module.id, 
    selector: 'visa-journey-details', 
    templateUrl: 'journey-details.html', 
    providers: [CommonService, AjaxLoader, AuthCookie] 
}) 

export class JourneyDetailsComponent { 
    public nationalities: Country; 
    public countryIsoCode: string = ''; 

    constructor(
     private router: Router, 
     private ajaxLoader: AjaxLoader) { 
     this.ajaxLoader.startLoading(); 
     this.getDropDownList(); 
    } 

    ngAfterViewInit() { 
     jQuery("#nationality").countrySelect(); 

     jQuery("#nationality").on('change',() => { 
      this.onChange(); 
     }); 
    } 

    onChange(): void { 
     if (jQuery("#nationality").countrySelect("getSelectedCountryData")) { 
      this.countryIsoCode = jQuery("#nationality").countrySelect("getSelectedCountryData").iso2; 
     } else { 
      this.countryIsoCode = ''; 
     } 
    } 
} 

project.config.ts

import { join } from 'path'; 

import { SeedConfig } from './seed.config'; 

/** 
* This class extends the basic seed configuration, allowing for project specific overrides. A few examples can be found 
* below. 
*/ 
export class ProjectConfig extends SeedConfig { 

    PROJECT_TASKS_DIR = join(process.cwd(), this.TOOLS_DIR, 'tasks', 'project'); 

    constructor() { 
     super(); 
     // this.APP_TITLE = 'Put name of your app here'; 

     /* Enable typeless compiler runs (faster) between typed compiler runs. */ 
     // this.TYPED_COMPILE_INTERVAL = 5; 

     // Add `NPM` third-party libraries to be injected/bundled. 
     this.NPM_DEPENDENCIES = [ 
      ...this.NPM_DEPENDENCIES, 
      // {src: 'jquery/dist/jquery.min.js', inject: 'libs'}, 
      // {src: 'lodash/lodash.min.js', inject: 'libs'}, 
      { src: '../../src/client/js/index.js', inject: 'libs' }, 
      { src: '../../src/client/js/Intl.min.js', inject: 'libs' }, 
      { src: '../../node_modules/intl/locale-data/jsonp/en.js', inject: 'libs' }, 
      { src: '../../src/client/js/es6-shim.min.js', inject: 'libs' }, 
      { src: '../../src/client/js/jquery-1.11.1.min.js', inject: 'libs'}, 
      { src: '../../src/client/js/moment.min.js', inject: 'libs'}, 
      { src: '../../src/client/js/plugins.js', inject: 'libs'}, 
      { src: '../../src/client/js/daterangepicker.js', inject: 'libs' }, 
      { src: '../../src/client/js/custom.min.js', inject: 'libs'}, 
      { src: '../../src/client/js/common-script.js', inject: 'libs' }, 
      { src: '../../src/client/js/QuickAccord.js', inject: 'libs' }, 
      { src: '../../src/client/js/paperfold.js', inject: 'libs' }, 
      { src: '../../src/client/css/daterangepicker.css', inject: true }, 
      { src: '../../src/client/css/style.min.css', inject: true }, 
     ]; 

     // Add `local` third-party libraries to be injected/bundled. 
     this.APP_ASSETS = [ 
      ...this.APP_ASSETS, 
     ]; 

     /* Add to or override NPM module configurations: */ 
     // this.mergeObject(this.PLUGIN_CONFIGS['browser-sync'], { ghostMode: false }); 
    } 

} 

希望这会帮助你。

为同另一参考： http://www.jqueryscript.net/form/jQuery-Plugin-For-Country-Selecter-with-Flags-flagstrap.html