Detaillierte Erläuterung einer selbst erstellten sekundären Verknüpfungskomponente für Städte und Landkreise in Angular4

In diesem Artikel wird hauptsächlich ein Beispiel einer von Angular4 erstellten sekundären Verknüpfungskomponente für Städte und Landkreise vorgestellt. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz angeben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Ich bin in letzter Zeit auf viele Probleme gestoßen und es geht mir wirklich schlecht. Angular ist wirklich ein Framework, das die Leute lieben und hassen. Was sie hassen, ist, dass es zu wenig Informationen gibt und es keine Möglichkeit gibt, anzufangen, wenn Probleme auftreten. Was mir gefällt, ist, dass viele Funktionen, die in anderen Frameworks nur schwer zu erreichen sind, in Angular problemlos umgesetzt werden können.

Da gibt es nicht viel zu sagen, ich bin kürzlich auf ein Problem bei der Renovierung eines alten Projekts gestoßen. Ich habe den Seiteneffekt von meinem ehemaligen Kollegen gemacht:

Ich sah diese drei Dropdown-Boxen auf den ersten Blick, konnte meine Neugier nicht zurückhalten und klickte darauf ihnen. Es stellt sich heraus, dass Sie im ersten Dropdown-Feld „Kommunal“ oder „Provinz“ auswählen können. Wenn Sie „Kommunal“ auswählen, werden zwei Dropdown-Felder für „Stadt“ und „Provinz“ angezeigt einfach. Nach der Auswahl der Stadt muss das Dropdown-Feld „Bezirk“ die entsprechenden Bezirks- und Kreisoptionen enthalten. Emmmm, es ist eine ganz typische zweistufige Verknüpfung, aber nachdem Sie die Ideen nun analysiert haben, fangen wir damit an! Zunächst müssen die Daten von den Backend-Kollegen eingeholt und deren Schnittstellen zum Befüllen der Daten aufgerufen werden. Schauen Sie sich an, wie die Daten aussehen:

Es sind etwas zu viele Daten vorhanden, daher werde ich nicht alle veröffentlichen. Erstellen Sie die Entity-Bean,

// 市级实体类
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;
  }
}

Die Entität ist fertig, beginnen Sie mit der Vorbereitung zum Abrufen von Daten und füllen Sie sie in die Entität:

// 二级联动组件
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();
  }
}

Da es sich um eine einzelne Serviceanfrage handelt, werde ich sie hier nicht zusammenfassen, um den Code klarer und intuitiver zu machen. Nachdem die Daten abgerufen wurden, ist es an der Zeit, sie in die Anzeigeoberfläche einzugeben:

<!-- 所属类型(此处固定，一般为获取后端数据字典数据) -->
<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>

Zu diesem Zeitpunkt haben wir festgestellt, dass die Kreisebene anscheinend nicht möglich ist direkt erhalten. Was sollen wir tun? Plötzlich kam mir der Gedanke, dass ich in ts eine Variable deklariere, um die von der Gemeinde ausgewählte ID-Nummer zu erhalten, und dann mithilfe der ID die untergeordneten Landkreise und Bezirke finde, damit ich sie leicht erhalten kann. Da wir Änderungen in Echtzeit erhalten möchten, implementieren wir den Änderungserkennungs-Hook:

// 二级联动组件
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;
      }
    }
  }
}

Schließlich fügen wir das Dropdown-Feld auf Bezirks- und Kreisebene hinzu:

<!-- 区县级下拉框 -->
<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>

Das ist alles, Sie sind fertig, Sie müssen sich nicht mehr auf die Bibliotheken anderer Leute verlassen.

Verwandte Empfehlungen:

Ajax kombiniert mit PHP, um die Methode der sekundären Verknüpfungsinstanz zu implementieren

JS zur Implementierung der sekundären Verknüpfung auswählen in HTML-Beispielfreigabe

Beispiel für provinzielle und kommunale sekundäre Verknüpfungsfunktionen, die von AngularJS implementiert werden

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung einer selbst erstellten sekundären Verknüpfungskomponente für Städte und Landkreise in Angular4. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!