Как показать выбранную опцию в начальной загрузке 4? - PullRequest
Новая
       64

Как показать выбранную опцию в начальной загрузке 4?

0 голосов
/ 09 октября 2019

Я хочу выбрать опцию из выпадающего меню, когда я нажимаю одну из опций, она всегда будет отображать опцию на английском языке вверху. Я хочу, чтобы выбранный язык был наверху при выборе.

** Это мой код **

    <ul class="navbar-nav align-items-lg-center ml-lg-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <img src="../assets/img/flags/uk.png" class="rds__flag-lang pr-2">English
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" [routerLink]="['kh','home']"><img src="../assets/img/flags/kh.png" class="rds__flag-lang pr-2">Khmer</a>
          <a class="dropdown-item" [routerLink]="['cn','home']"><img src="../assets/img/flags/ch.png" class="rds__flag-lang pr-2">China</a>
          <a class="dropdown-item" [routerLink]="['en','home']"><img src="../assets/img/flags/uk.png" class="rds__flag-lang pr-2">English</a>
        </div>
      </li>
    </ul>

Ответы [ 2 ]

2 голосов
/ 09 октября 2019

Вы можете связать событие клика и вызвать функцию по щелчку, затем сохранить значение выбранного элемента в переменной и использовать эту переменную в файле HTML-шаблона 

<ul class="navbar-nav align-items-lg-center ml-lg-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <img src="../assets/img/flags/uk.png" class="rds__flag-lang pr-2"> {{selectedItem}}
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" [routerLink]="['kh','home']" (click)="onChangeLang('Khmer')"><img src="../assets/img/flags/kh.png" class="rds__flag-lang pr-2">Khmer</a>
              <a class="dropdown-item" [routerLink]="['cn','home']" (click)="onChangeLang('China')"><img src="../assets/img/flags/ch.png" class="rds__flag-lang pr-2">China</a>
              <a class="dropdown-item" [routerLink]="['en','home']" (click)="onChangeLang('English')"><img src="../assets/img/flags/uk.png" class="rds__flag-lang pr-2">English</a>
            </div>
          </li>
        </ul>

В файле класса ts 

selectedItem: string;

onChangeLang(selectedItem: string) {
    this.selectedItem = selectedItem;
}

Вы можете ссылаться на угловые документы https://angular.io/guide/user-input

https://angular.io/guide/template-syntax

0 голосов
/ 09 октября 2019

Сделайте это самым умным способом, создав массив опций выбора, затем используйте NgFor

. Вот код .ts 

 selectOptions = [{lang:'Khmer', flag:'kh.png', route:'kh'},
                  {lang:'China', flag:'ch.png', route:'ch'},
                  {lang:'English', flag:'uk.png', flag:'uk'}];

 selectedOption: string;

 onChangeLang(selectedOption: string) {
    this.selectedOption= selectedOption;
 }

и часть шаблона. 

  <ul class="navbar-nav align-items-lg-center ml-lg-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <img src="../assets/img/flags/{selectedOption.flag}" class="rds__flag-lang pr-2"> {{selectedOption.lang}}
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a *ngFor="let option of selectOptions" 
             class="dropdown-item" 
            [routerLink]="[option.route,'home']" 
            (click)="onChangeLang(option)">
               <img src="../assets/img/flags/{{selectedOption.flag}}" 
             class="rds__flag-lang pr-2" >{{option.lang}}</a> 
        </div>
      </li>
    </ul>
...