# @angular-material-extensions/select-country 中文文档

规范地址：https://npmcn.com/package/%40angular-material-extensions/select-country/

版本：17\.0\.0
npm 元数据更新时间：2023-11-19T09:44:37.410Z
中文译文更新时间：2026-11-06T04:16:08.927Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40angular-material-extensions/select-country
原文对照：https://npmcn.com/package/%40angular-material-extensions/select-country/?lang=original
项目主页：https://angular-material-extensions.github.io/select-country
源码仓库：https://github.com/angular-material-extensions/select-country

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：4.1 MB，108 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=16
- 运行依赖：1 个
- peer 依赖：@angular/common ^17\.x，@angular/core ^17\.x，@angular/forms ^17\.x，@angular/platform-browser ^17\.x，@angular/cdk ~17\.x，@angular/material ~17\.x，rxjs ^7\.x
- 首次发布：2019-11-14T23:00:47.793Z
- 最新版本发布：2023-11-19T09:44:37.222Z
- 近 30 天下载量：7409（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：41（近 12 个月 0 个）

## 中文简介

允许用户选择国家或国籍的角材料组件

## 安装

```sh
npm install @angular-material-extensions/select-country
```

也可以使用：`pnpm add @angular-material-extensions/select-country`、`yarn add @angular-material-extensions/select-country`、`bun add @angular-material-extensions/select-country`

## README

![angular-material-extensions's logo](https://cdn.jsdelivr.net/gh/angular-material-extensions/select-country@master/assets/angular-material-extensions-logo.svg)

# @angular-material-extensions/select-country - 允许用户选择具有自动完成特性的国家或国籍的Angular 材料组件

[![npm version](https://badge.fury.io/js/%40angular-material-extensions%2Fselect-country.svg)](https://badge.fury.io/js/%40angular-material-extensions%2Fselect-country) [![npm demo](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://angular-material-extensions.github.io/select-country) [![docs: typedoc](https://img.shields.io/badge/docs-typedoc-4D0080.svg)](https://angular-material-extensions.github.io/select-country/doc/index.html) [![Join the chat at https://gitter.im/angular-material-extensions/Lobby](https://badges.gitter.im/angular-material-extensions/Lobby.svg)](https://gitter.im/angular-material-extensions/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![Build Status](https://travis-ci.org/angular-material-extensions/select-country.svg?branch=master)](https://travis-ci.org/angular-material-extensions/select-country) [![codecov](https://codecov.io/gh/angular-material-extensions/select-country/branch/master/graph/badge.svg)](https://codecov.io/gh/angular-material-extensions/select-country) [![Greenkeeper Badge](https://badges.greenkeeper.io/angular-material-extensions/select-country.svg)](https://greenkeeper.io/) [![license](https://img.shields.io/github/license/angular-material-extensions/select-country.svg?style=flat-square)](https://github.com/angular-material-extensions/select-country/blob/master/LICENSE)

![@angular-material-extensions/select-country demonstration](https://raw.githubusercontent.com/angular-material-extensions/select-country/HEAD/assets/v0.2.0/select-country.gif)

![@angular-material-extensions/select-country demonstration](https://raw.githubusercontent.com/angular-material-extensions/select-country/HEAD/assets/v0.2.0/select-country.png)

## 由开发者建并供开发者使用 : 心脏 :

你有什么问题或建议吗? 请不要犹豫联系我们! 或者,提供PR QQ打开一个适当的问题 [这里](https://github.com/angular-material-extensions/select-country/issues)

如果你喜欢这个项目,请支持 [角-材料-扩展](https://github.com/angular-material-extensions) 由主演: 明星: 分享它 : 高音:

## 目录

-   [演示](https://npmcn.com/package/%40angular-material-extensions/select-country/#readme-demo)
-   [构成部分](https://npmcn.com/package/%40angular-material-extensions/select-country/#readme-components)
-   [依赖关系](https://npmcn.com/package/%40angular-material-extensions/select-country/#readme-dependencies)
-   [安装](https://npmcn.com/package/%40angular-material-extensions/select-country/#readme-installation)
-   [API 密码](https://npmcn.com/package/%40angular-material-extensions/select-country/#readme-api)
-   [使用量](https://npmcn.com/package/%40angular-material-extensions/select-country/#readme-usage)
-   [本地运行 Demo 应用程序](https://npmcn.com/package/%40angular-material-extensions/select-country/#readme-run-demo-app-locally)
-   [其他角图书馆](https://npmcn.com/package/%40angular-material-extensions/select-country/#readme-other-angular-libraries)
-   [支助](https://npmcn.com/package/%40angular-material-extensions/select-country/#readme-support)
-   [许可证](https://npmcn.com/package/%40angular-material-extensions/select-country/#readme-license)

## [演示](https://angular-material-extensions.github.io/select-country)

在 [https://angular-material-extension.github.io/select-country 互联网档案馆的存檔,存档日期2014-12-22](https://angular-material-extensions.github.io/select-country)

## 图书馆的组成部分

-   `<mat-select-country>` 用于显示主组件

* * *

## 依赖关系

-   [角质](https://angular.io/) 开发并测试 `17.x`

* * *

## [安装](https://angular-material-extensions.github.io/select-country/getting-started)

## 1\. 通过 _纳克后加_. (建议)

如果未设置角材料设计, 请运行 `ng add @angular/material` [学习更多](https://material.angular.io/guide/getting-started)

现在通过 `angular schematics`

```shell
ng add @angular-material-extensions/select-country
```

## 2\. 通过 _无_. (备选案文)

安装对等依赖

```shell
npm i svg-country-flags -s
```

然后更新您的 `angular.json` 类似下面( svg- country- flags)

```json
"assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "./node_modules/svg-country-flags/svg",
                "output": "src/assets/svg-country-flags/svg"
              }
            ],
```

现在安装 `@angular-material-extensions/select-country` 通过:

```shell
npm install --save @angular-material-extensions/select-country
```

### 导入库

如果您通过角图安装库, 您可以跳过此步骤

安装后需要导入主模块和 `HttpClientModule`数字 :

```js
import { MatSelectCountryModule } from "@angular-material-extensions/select-country";
```

```typescript
import { MatSelectCountryModule } from '@angular-material-extensions/select-country';
import {HttpClientModule} from '@angular/common/http';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [
              MatSelectCountryModule.forRoot('de'), // you can use 'br' | 'de' | 'en' | 'es' | 'fr' | 'hr' | 'hu' | 'it' | 'nl' | 'pt' --> MatSelectCountrySupportedLanguages
             HttpClientModule, ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}
```

其他模块

```typescript
import { MatSelectCountryModule } from '@angular-material-extensions/select-country';
import {HttpClientModule} from '@angular/common/http';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [MatSelectCountryModule, HttpClientModule, ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}
```

您应用程序中的其他模块, 如懒惰的装入导入 `MatSelectCountryModule` 输入您的特性模块 :

## API 密码

### `<mat-select-country>` 用于显示主组件 - [参见演示示例](https://angular-material-extensions.github.io/select-country/examples)

| 选项 | 绑定 | 类型 | 默认 | 说明 |
| :-- | :-: | :-: | :-: | :-- |
| 价值 | `Input()` | `Country` | \- 说吧 | 选定国家(通过一个空的国家对象,其中包含有alpha2代码以进行alpha2检索) |
| 外观 | `Input()` | `MatFormFieldAppearance` | \- 说吧 | 可能的外观样式 `mat-form-field` ("legacy","标准","填充"或"外线") |
| 国家 | `Input()` | `Country[]` | 储存在解放区的所有国家 | 应加载的国家 - 预先确定你只需要的国家! |
| 标签 | `Input()` | `boolean` | \- 说吧 | `mat-form-field` 标签的文本 |
| 记录大小 | `Input()` | `number` | \- 说吧 | 应获取的国家数目 -- > 改善了业绩 |
| 车手 | `Input()` | `boolean` | \- 说吧 | 输入占位符文本 |
| 已禁用 | `Input()` | `boolean` | \- 说吧 | 组件是否禁用 |
| 装入 | `Input()` | `boolean` | \- 说吧 | 组件是否正在装入 |
| 无效 | `Input()` | `boolean` | \- 说吧 | 组件是否能够发射 `null` |
| 只读 | `Input()` | `boolean` | \- 说吧 | 是否只读取组件 |
| 选项卡索引 | `Input()` | `number | string` | \- 说吧 | 组件是否可被聚焦, 以及它在哪里参与相继键盘导航 |
| 显示呼叫代码 | `Input()` | `boolean` | 虚假 | 在标签和选择中显示国家调用代码的组件 |
| 类 | `Input()` | `string` | \- 说吧 | 类属性对输入文本或验证忽略( 可选) 应用样式 |
| 语言 | `Input()` | `string` | \- 说吧 | 语言,如果未指定 MatSelectCouncilModule.forRoot ('XX') 将使用(可选) |
| 名称 | `Input()` | `string` | 国家 | 输入元素的属性名称 |
| 自动补全 | `Input()` | `string` | \- 说吧 | 输入元素的属性自动完成,以避免一些浏览器提出“ 不” 的建议 |
| 选定国家 | `Output()` | `EventEmitter<Country>` | \- 说吧 | 将选定国家发送为对象(见下文界面) |

```typescript
interface Country {
  name: string;
  alpha2Code: string;
  alpha3Code: string;
  numericCode: string;
  callingCode: string;
}
```

## [使用量](https://angular-material-extensions.github.io/select-country)

添加 `<mat-select-country>` 模板中的元素 :

```html
<mat-select-country>
</mat-select-country>
```

![@angular-material-extensions/select-country demonstration](https://raw.githubusercontent.com/angular-material-extensions/select-country/HEAD/assets/v0.2.0/example_full.png)

![@angular-material-extensions/select-country demonstration](https://raw.githubusercontent.com/angular-material-extensions/select-country/HEAD/assets/v0.2.0/example3.png)

![@angular-material-extensions/select-country demonstration](https://raw.githubusercontent.com/angular-material-extensions/select-country/HEAD/assets/v0.2.0/example2.png)

#### 使用带有反应表单的库

### 选项 1 有反应窗体

```html
<mat-select-country appearance="outline"
                    label="Country"
                    [formControl]="countryFormControl"
                    (onCountrySelected)="onCountrySelected($event)">
</mat-select-country>
```

### 有反应窗体的选项2

```html
<form [formGroup]="countryFormGroup">
    <div fxLayoutAlign="center">
      <mat-select-country appearance="outline"
                          label="Country"
                          class="className"
                          formControlName="country"
                          (onCountrySelected)="onCountrySelected($event)">
      </mat-select-country>
    </div>
  </form>
```

```typescript
import {Component,OnInit} from '@angular/core';
import {FormControl} from '@angular/forms';

import {Country} from '@angular-material-extensions/select-country';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
  title = 'select-country';

  countryFormControl = new FormControl();
  countryFormGroup: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    angulartics2GoogleAnalytics.startTracking();
  }

  ngOnInit(): void {

    this.countryFormGroup = this.formBuilder.group({
      country: []
    });

    this.countryFormGroup.get('country').valueChanges
.subscribe(country => console
.log('this.countryFormGroup.get("country").valueChanges', country));

    this.countryFormControl.valueChanges
.subscribe(country => console
.log('this.countryFormControl.valueChanges', country));
  }


  onCountrySelected($event: Country) {
    console.log($event);
  }
}

```

### 预先定义要装入的国家

```html
<mat-select-country appearance="outline"
                    label="Country"
                    [countries]="predefinedCountries"
                    (onCountrySelected)="onCountrySelected($event)">
</mat-select-country>
```

```typescript
import {Country} from '@angular-material-extensions/select-country';

predefinedCountries: Country[] = [
  {
    name: 'Germany',
    alpha2Code: 'DE',
    alpha3Code: 'DEU',
    numericCode: '276',
    callingCode: '+49'
  },
  {
    name: 'Greece',
    alpha2Code: 'GR',
    alpha3Code: 'GRC',
    numericCode: '300',
    callingCode: '+30'
  },
  {
    name: 'France',
    alpha2Code: 'FR',
    alpha3Code: 'FRA',
    numericCode: '250',
    callingCode: '+33'
  },
  {
    name: 'Belgium',
    alpha2Code: 'BE',
    alpha3Code: 'BEL',
    numericCode: '056',
    callingCode: '+32'
  }
];
```

结果 :

![@angular-material-extensions/select-country demonstration](https://raw.githubusercontent.com/angular-material-extensions/select-country/HEAD/assets/v2.1.0/predefined.png)

### 改进业绩----使用 `itemsLoadSize` 属性

```html
<mat-select-country appearance="outline"
                    label="Country"
                    [itemsLoadSize]="5">
</mat-select-country>
```

只有5个国家会得到!

### 动态更改语言 - 使用 `language` 属性

```html
<mat-select-country appearance="outline"
                    label="Country"
                    [language]="languageSelected"
                    (onCountrySelected)="onCountrySelected($event)">
</mat-select-country>
```

### 本地运行 Demo 应用程序

构建库

```bash
$ npm run build:lib
```

服务演示程序

```bash
$ npm start
```

## 其他角图书馆

-   [ngx-auth-fire-baseui (英语)](https://github.com/AnthonyNahas/ngx-auth-firebaseui)
-   [ngx-链接js](https://github.com/AnthonyNahas/ngx-linkifyjs)
-   [@angular-material-extensions/password-strength (原始内容存档于2019-09-26) (英语)](https://github.com/angular-material-extensions/password-strength)
-   [@angular-material-extension/google-maps-自动完成](https://github.com/angular-material-extensions/google-maps-autocomplete)
-   [@angular-material-extensions/link-preview (英语)](https://github.com/angular-material-extensions/link-preview)
-   [@angular-material-extensions/fab-menu (法语)](https://github.com/angular-material-extensions/fab-menu)
-   [@angular-material-extensions/页面](https://github.com/angular-material-extensions/pages)
-   [@angular-material-extensions/ contacts (英语)](https://github.com/angular-material-extensions/contacts)

* * *

## 谁用这个图书馆?

[纳豪斯.de](https://npmcn.com/nahaus.de) - 数字和自动房地产管理

把你的项目放在这里,请放下适当的公关

* * *

## 支助

-   丢弃电子邮件到 : [安东尼·纳哈斯](mailto:anthony.na@hotmail.de)
-   或打开适当的 [问题](https://github.com/angular-material-extensions/select-country/issues)
-   让我们谈谈 [减肥](https://gitter.im/angular-material-extensions/Lobby)

由开发商建造

* * *

![jetbrains logo](https://raw.githubusercontent.com/angular-material-extensions/select-country/HEAD/assets/jetbrains-variant-4_logos/jetbrains-variant-4.png)

这个项目得到下列机构的支持: [喷射板](https://www.jetbrains.com/) 1个产品包 OS License 包括. [网络风暴](https://www.jetbrains.com/webstorm)

* * *

## 许可证

版权(c)2020-2024年 [安东尼·纳哈斯](https://github.com/AnthonyNahas)获得麻省理工学院许可证

![angular-material-extensions's logo](https://cdn.jsdelivr.net/gh/angular-material-extensions/select-country@master/assets/badge_made-in-germany.svg)

## 常见问题

### @angular-material-extensions/select-country 是什么？

允许用户选择国家或国籍的角材料组件

### 如何安装 @angular-material-extensions/select-country？

在项目目录运行 npm install @angular-material-extensions/select-country，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/common（^17\.x）、@angular/core（^17\.x）、@angular/forms（^17\.x）、@angular/platform-browser（^17\.x）、@angular/cdk（~17\.x）、@angular/material（~17\.x）、rxjs（^7\.x）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @angular-material-extensions/select-country 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @angular-material-extensions/select-country 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @angular-material-extensions/select-country 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=16。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @angular-material-extensions/select-country 可以商用吗？

@angular-material-extensions/select-country 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @angular-material-extensions/select-country 的下载量有多少？

根据 npm 官方下载统计，@angular-material-extensions/select-country 在 2026/10/06 – 2026/11/04 这 30 天内被下载 7,409 次，日均约 247 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @angular-material-extensions/select-country 还在维护吗？

最新版本 17\.0\.0 发布于 2023/11/19（2 年前）；至今共发布 41 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/11/15。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。