在Angle> 4.x.x中将RouterLink设置为Select

时间:2018-08-24 11:21:24

标签: angular drop-down-menu routing routes html-select

我正在尝试在Angular 6.1.2中构建一个应用程序,用户可以在其中从下拉菜单中选择一个选项并查看所需的结果。到目前为止,我能够实现下拉菜单,但是在理解上遇到了一些问题:

  

如何为其设置[routerLink]。

我正在与您分享详细信息:

背景

Angular Version: 6.1.2,

相关代码:

 <div class="col-6 navigationLanguageCol">
          <select ng-model="languages" (change)="languageSelected($event)">
            <option value=" ">Languages</option>
            <option *ngFor="let language of Languages">{{ language.name }} ({{ language.code }})</option>
          </select>
          <p>
            Languaged: {{ selectedLanguage }}
          </p>
        </div>

.ts文件:

import { Component } from '@angular/core';

// Router Module for Application level Route
import { RouterModule, Routes } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Terra';

  public Languages;
  public selectedLanguage;


  constructor(private router: RouterModule) {
    this.Languages = [

      { "code": "ab", "name": "Abkhaz", "nativeName": "аҧсуа" },
      { "code": "aa", "name": "Afar", "nativeName": "Afaraf" },
      { "code": "af", "name": "Afrikaans", "nativeName": "Afrikaans" },
      { "code": "ak", "name": "Akan", "nativeName": "Akan" },
      { "code": "sq", "name": "Albanian", "nativeName": "Shqip" },
      { "code": "am", "name": "Amharic", "nativeName": "አማርኛ" },
      { "code": "ar", "name": "Arabic", "nativeName": "العربية" },
      { "code": "an", "name": "Aragonese", "nativeName": "Aragonés" },
      { "code": "hy", "name": "Armenian", "nativeName": "Հայերեն" },
      { "code": "as", "name": "Assamese", "nativeName": "অসমীয়া" },
      { "code": "av", "name": "Avaric", "nativeName": "авар мацӀ, магӀарул мацӀ" },
      { "code": "ae", "name": "Avestan", "nativeName": "avesta" },
      { "code": "ay", "name": "Aymara", "nativeName": "aymar aru" },
      { "code": "az", "name": "Azerbaijani", "nativeName": "azərbaycan dili"}      
    ]
  }

  languageSelected(event: any) {
    this.selectedLanguage = event.target.value;
  }

}

问题

我想在navigationLanguageCol中设置[routerLink],但无法理解如何设置。我尝试过在线查找,但似乎无济于事

任何建议/帮助将不胜感激。

谢谢

0 个答案:

没有答案