Explication détaillée d'un composant de liaison secondaire de ville et de comté créé par Angular4

Cet article présente principalement un exemple de composant de liaison secondaire de ville et de comté réalisé par Angular4. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

J'ai rencontré beaucoup de problèmes récemment et je suis vraiment malheureux. Angular est vraiment un framework que les gens aiment et détestent, c'est qu'il y a trop peu d'informations et qu'il n'y a aucun moyen de démarrer lorsqu'ils rencontrent des problèmes. Ce que j'aime, c'est que de nombreuses fonctions difficiles à réaliser dans d'autres frameworks peuvent être facilement réalisées dans Angular.

Pas grand chose à dire, j'ai récemment rencontré un problème avec la rénovation d'un ancien projet. J'ai eu l'effet page réalisé par mon ancien collègue :

J'ai vu ces trois listes déroulantes au premier coup d'oeil, et je n'ai pas pu retenir ma curiosité et j'ai cliqué sur eux. Il s'avère que dans la première liste déroulante, vous pouvez sélectionner municipal ou provincial. Si vous sélectionnez municipal, alors deux listes déroulantes de ville et de comté apparaîtront. S'il s'agit de provincial, il sera masqué. facile. Ensuite, après avoir sélectionné la ville, la liste déroulante du district doit contenir les options de district et de comté correspondantes. emmmm, c'est un lien à deux niveaux très typique, mais maintenant que vous avez analysé les idées, commençons à le faire ! Tout d'abord, les données doivent être obtenues auprès des collègues back-end et leurs interfaces sont appelées pour remplir les données. Jetez un œil à quoi ressemblent les données :

Il y a un peu trop de données, donc je ne les publierai pas toutes. Créez le bean entité,

// 市级实体类
export class City {

  // 市级id
  cityId: string;

  // 所属类型(0.市属 1.省属)
  cityType: number;

  // 市级名称(可选属性，若cityType为1时，可不填)
  cityName: string;

  // 所属区县
  counties?: Array<Country>;

}

// 区县级实体类
export class Country {

  // 区县id
  countryId: string;

  // 区县名称
  countryName: string;

}

// 填写市县类
export class CityAndCountry {

  // 市级id
  cityId: string;

  // 县级id
  countryId: string;

  // 市级类型
  cityType: number;

  // 市县级实体构造器 
  constructor() {
    // 给市级id赋予一个真实城市的id初始值
    this.cityId = &#39;***&#39;;
    // 同上
    this.countryId = &#39;***&#39;;
    // 同上
    this.cityType = 0;
  }
}

L'entité est terminée, commencez à vous préparer pour obtenir les données et remplissez-les dans l'entité :

// 二级联动组件
export class CityAreaComponent implements OnInit, OnDestroy {

  // 结果码 (用于页面处理显示标识)
  result_code: number;

  // 市级实体声明
  city: City[];

  // 县区级实体声明
  country: Country[];

  // 市县、区级填写实体声明
  cac: CityAndCountry;

  // 声明订阅对象
  subscript: Subscription;

  /**
  * 构造器
  * @param {CityService} service 注入服务
  */
  constructor (private service: CityService) {
    // 结果码 (-1.网络或其他异常 0.无内容 1.请求成功 2.请等待)
    this.result_code = 2;
    // 初始化填写市区、县级填写实体
    cac = new CityAndCountry();
    // 初始化数组(这步很重要，有很多人说使用数组相关函数会报未定义异常，是因为没有初始化的原因)
    this.city = [];
    this.country = [];
    // 初始化订阅对象
    this.subscript = new Subscription();
  }

  /**
  * 生命周期初始化钩子(生命周期尽量按执行顺序来写，养成好习惯)
  */
  ngOnInit(): void {
    this.getCityArea();
  }

  /** 获取市县数据 */
  getCityArea() {
    /** 将请求交付服务处理(service代码比较简单，就不贴了) */
    this.subscript = this.service.getCityArea().subscribe(res => {
      /** 获取json请求结果 */
      const result = res.json();
      /** 判断结果返回码 */
      switch (result['code']) {
        /** 请求成功，并且有值 */
        case 200:
        /** 改变初始返回码 */
        this.result_code = 1;
        /** 获取并填充数据 */
        this.city = json['city'];
        break;
        /** 其他情况不重复赘述 */
      }
    }, err => {
      /** 显示预设异常信息提示给用户 */
      this.result_code = -1;
      /** 打印log，尽量使用日志产出 */
      console.error(err);
    });
  }

  /** 生命周期销毁钩子 */
  ngOnDestroy(): void {
    /** 取消订阅 */
    this.subscript.unsubscribe();
  }
}

Comme il s'agit d'une seule demande de service, afin de rendre le code plus clair et plus intuitif, je ne l'encapsulerai pas ici. Une fois les données obtenues, il est temps de les remplir dans l'interface d'affichage :

<!-- 所属类型(此处固定，一般为获取后端数据字典数据) -->
<select class="city_type" [value]="cac.cityType" [(ngModel)]="cac.cityType">
  <!-- 所传内容为整数型 -->
  <option value=0>市属</option>
  <option value=1>省属</option>
</select>

<!-- 市级选择(类型为省属时隐藏) -->
<select class="city" [value]="cac.cityId" [(ngModel)]="cac.cityId" *ngIf="city.cityType==0">
  <!-- 遍历城市数组 -->
  <option *ngFor="let opt of option" [value]="opt.cityId">{{opt.cityName}}</option>
</select>

À ce stade, nous avons constaté qu'il semble que le niveau du comté ne puisse pas être obtenu directement. Que devons-nous faire? Il m'est soudain venu à l'esprit de déclarer une variable dans ts pour obtenir le numéro d'identification sélectionné par la municipalité, puis d'utiliser l'identifiant pour trouver les comtés et districts subordonnés, afin de pouvoir l'obtenir facilement. Puisque nous souhaitons obtenir les changements en temps réel, nous implémentons le crochet de détection des changements :

// 二级联动组件
export class CityAreaComponent implements OnInit, OnDestroy, DoCheck{
  // 声明县区级数组
  country: Array<Country>;

  constructor() {
    /** 重复代码不赘述 */
    /** 初始化数组 */
    country = [];
  }  

  /** 生命周期检测变化钩子 */
  ngDoCheck(): void {
    /** 遍历市级数组 */
    for (let i = 0; i < this.city.length; i++) {
      /** 若选择的市级id和市级数组中的id相吻合 */
      if (this.city[i].id == this.cac.countryId) {
        /** 将该索引下的counties数组赋予给区县级数组 */
        this.country = this.city[i].counties;
      }
      /** 我们无法避免直辖市的情况，所以多一重判断 */
      if (this.country.length > 0) {
        /** 为了用户体验，我们要尽量在用户选择市级城市后，默认选择一个区县级城市 */
        this.cac.country.id = this.country[0].id;
      }
    }
  }
}

Enfin, ajoutez la liste déroulante au niveau du district et du comté :

<!-- 区县级下拉框 -->
<select [value]="cac.countryId" [(ngModel)]="cac.countryId" *ngIf="cac.cityType==0 && country.length > 0">
  <option *ngFor="let count of country" [value]="count.id">{{count.name}}</option>
</select>

Ça y est, vous avez terminé, vous n'avez plus besoin de vous fier aux bibliothèques des autres.

Recommandations associées :

Ajax combiné avec php pour implémenter la méthode d'instance de liaison secondaire

js pour implémenter Sélectionnez une liaison secondaire dans Partage d'exemples HTML

Exemple de fonctions de liaison secondaire provinciales et municipales mises en œuvre par AngularJS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!