我正在尝试在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],但无法理解如何设置。我尝试过在线查找,但似乎无济于事
任何建议/帮助将不胜感激。
谢谢