perf： 优化 rdp 复用下拉选项

Author: ibuler

src/app/elements/connect/connect-dialog/advanced-option/advanced-option.component.html

@@ -9,34 +9,40 @@
 
       <div *ngIf="isShowAdvancedOption" class="options-container">
         <ng-container *ngFor="let item of advancedOptions">
-          <div *ngIf="item.type === 'checkbox'" class="option-item">
-            <mat-checkbox
-              [(ngModel)]="connectOption[item.field]"
-              [name]="item.field"
-            >
-              {{ item.label | translate }}
-            </mat-checkbox>
-          </div>
-          <ng-container *ngIf="item.type === 'select'">
-            <mat-form-field class="option-item">
-              <mat-label>{{ item.label | translate }}</mat-label>
-              <mat-select [(ngModel)]="connectOption[item.field]" [name]="item.field">
-                <mat-option *ngFor="let option of item.options" [value]="option.value">
-                  {{ option.label | translate }}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-          </ng-container>
-          <ng-container *ngIf="item.type === 'radio'">
-            <div class="option-item">
-              <mat-radio-group [(ngModel)]="connectOption[item.field]" [name]="item.field">
-                <mat-label style="margin-right: 10px">{{ item.label | translate }}</mat-label>
-                <mat-radio-button *ngFor="let option of item.options" [value]="option.value">
-                  {{ option.label | translate }}
-                </mat-radio-button>
-              </mat-radio-group>
+          <span>
+            <div *ngIf="item.type === 'checkbox'" class="option-item">
+              <mat-checkbox
+                (change)="onChange()"
+                [(ngModel)]="connectOption[item.field]"
+                [name]="item.field"
+              >
+                {{ item.label | translate }}
+              </mat-checkbox>
             </div>
-          </ng-container>
+            <ng-container *ngIf="item.type === 'select'">
+              <mat-form-field class="option-item">
+                <mat-label>{{ item.label | translate }}</mat-label>
+                <mat-select (selectionChange)="onChange()" [(ngModel)]="connectOption[item.field]"
+                            [name]="item.field"
+                >
+                  <mat-option *ngFor="let option of item.options" [value]="option.value">
+                    {{ option.label | translate }}
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
+            </ng-container>
+            <ng-container *ngIf="item.type === 'radio'">
+              <div class="option-item">
+                <mat-radio-group (change)="onChange()" [(ngModel)]="connectOption[item.field]"
+                                 [name]="item.field">
+                  <mat-label style="margin-right: 10px">{{ item.label | translate }}</mat-label>
+                  <mat-radio-button *ngFor="let option of item.options" [value]="option.value">
+                    {{ option.label | translate }}
+                  </mat-radio-button>
+                </mat-radio-group>
+              </div>
+            </ng-container>
+          </span>
         </ng-container>
       </div>
     </mat-expansion-panel>

src/app/elements/connect/connect-dialog/advanced-option/advanced-option.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input, OnChanges} from '@angular/core';
+import {Component, Input, OnChanges, OnInit} from '@angular/core';
 import {ConnectMethod, ConnectOption, Protocol, Setting} from '@app/model';
 import {resolutionsChoices} from '@app/globals';
 import {SettingService} from '@app/services';
@@ -8,24 +8,22 @@ import {SettingService} from '@app/services';
   templateUrl: './advanced-option.component.html',
   styleUrls: ['./advanced-option.component.scss'],
 })
-export class ElementAdvancedOptionComponent implements OnChanges {
+export class ElementAdvancedOptionComponent implements OnChanges, OnInit {
   @Input() protocol: Protocol;
   @Input() connectMethod: ConnectMethod;
-  @Input() connectOption: Object = {};
+  @Input() connectOption: any = {};
   public advancedOptions: ConnectOption[] = [];
   public isShowAdvancedOption = false;
   public setting: Setting;
+  private allOptions: ConnectOption[] = [];
   private boolChoices = [
     {label: 'Yes', value: true},
     {label: 'No', value: false},
   ];
 
   constructor(public _settingSvc: SettingService) {
     this.setting = _settingSvc.setting;
-  }
-
-  ngOnChanges() {
-    this.advancedOptions = [
+    this.allOptions = [
       {
         type: 'select',
         field: 'charset',
@@ -96,7 +94,6 @@ export class ElementAdvancedOptionComponent implements OnChanges {
           if (!this._settingSvc.hasXPack()) {
             return true;
           }
-
           return !this.connectMethod || this.connectMethod.component !== 'tinker';
         }
       },
@@ -113,20 +110,40 @@ export class ElementAdvancedOptionComponent implements OnChanges {
           if (!this._settingSvc.globalSetting.CONNECTION_TOKEN_REUSABLE) {
             return true;
           }
-          return this.connectMethod.component !== 'tinker' && this.connectMethod.component !== 'razor';
+          if (this.connectMethod.component === 'razor') {
+            return false;
+          }
+          if (this.connectMethod.component === 'tinker') {
+            return this.connectOption.appletConnectMethod !== 'client';
+          }
+          return true;
         }
       }
     ];
+  }
+
+  ngOnInit() {
+  }
+
+  checkOptions() {
     const onlyUsingDefaultFields = ['reusable'];
-    onlyUsingDefaultFields.forEach(i => {
-      this.connectOption[i] = this.advancedOptions.find(j => j.field === i).value;
-    });
-    this.advancedOptions = this.advancedOptions.filter(i => !i.hidden());
-    this.advancedOptions.forEach(i => {
+    this.allOptions.forEach(i => {
       if (this.connectOption[i.field] === undefined) {
         this.connectOption[i.field] = i.value;
       }
+      if (onlyUsingDefaultFields.includes(i.field)) {
+        i.value = this.connectOption[i.field];
+      }
     });
+    this.advancedOptions = this.allOptions.filter(i => !i.hidden());
     this.isShowAdvancedOption = this.advancedOptions.length > 0;
   }
+
+  onChange() {
+    this.checkOptions();
+  }
+
+  ngOnChanges() {
+    this.checkOptions();
+  }
 }