Angular Ng2TelInput：将国家区号/拨号代码存储到变量中

首先需要明确你使用的区号选择组件的onCountryChange回调返回值结构——不同组件的实现逻辑有差异，以下是两种常见场景的解决方案：

场景1：回调直接传入国家对象（多数现代组件库） #

很多国际区号选择组件（如react-phone-input-2、vue-tel-input）的onCountryChange不会返回原生Event对象，而是直接传入包含国家信息的对象，其中就包含拨号代码（通常字段名为dialCode）。

示例代码（React）：

import { useState } from 'react';
import PhoneInput from 'react-phone-input-2';
import 'react-phone-input-2/lib/style.css';

function PhoneInputComponent() {
  // 定义变量存储拨号代码
  const [storedDialCode, setStoredDialCode] = useState('');

  const onCountryChange = (country) => {
    // 从国家对象中提取拨号代码
    const dialCode = country.dialCode;
    // 存储到变量（状态变量）中
    setStoredDialCode(dialCode);
    console.log('当前选中的拨号代码:', dialCode);
  };

  return (
    <PhoneInput onCountryChange={onCountryChange} />
  );
}

场景2：回调返回原生Event对象 #

如果你的组件确实返回原生Event对象，拨号代码通常会挂载在触发元素的自定义属性（如data-dial-code）或组件封装的属性上，可通过event.target访问：

示例代码（原生JavaScript）：

<select id="country-select">
  <option value="CN" data-dial-code="+86">中国 (+86)</option>
  <option value="US" data-dial-code="+1">美国 (+1)</option>
</select>

const countrySelect = document.getElementById('country-select');
// 定义变量存储拨号代码
let storedDialCode = '';

countrySelect.addEventListener('change', (event) => {
  // 从选中选项的data属性中提取拨号代码
  storedDialCode = event.target.selectedOptions[0].dataset.dialCode;
  console.log('存储的拨号代码:', storedDialCode);
});

关键提示 #

如果不确定Event对象的结构，可在回调中打印console.log(event)，查看控制台输出的对象属性，找到包含拨号代码的字段（常见字段名：dialCode、dataDialCode、phoneCode）。

内容的提问来源于stack exchange，提问作者Pankaj