希望使用Angular 6和Routing根据下拉值显示组件

我是个新手

我想使用Angular 6根据下拉值导航不同的组件

我已经使用了路由器模块，正在从下拉列表中获取值，但是如何根据下拉列表的值导航到组件

找到代码

1> app.routing.module

const routes: Routes = [
  {path:'about',component : AboutComponent},
  {path:'home',component : HomeComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2> app.component.ts

export class AppComponent {

  navLinks = [
    { path : 'home', label : 'Home', id: 1 },
    { path : 'about', label : 'About', id: 2 }
  ];

3> app.component.html

<nav>
    <select id="department" name="department" [(ngModel)]="department" class="form-control">
        <option *ngFor="let links of navLinks" [value]="links.id" [routerLink]="links.path" routerLinkActive #rla="routerLinkActive"> 
          {{links.label}}
        </option>
      </select>
</nav>

{{links.label}

routerLink

和

routerLinkActive

将无法使用

选择

。将所选值绑定到元素，然后导航到

select

。以下是完整的解决方案：

app.component.ts：

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

export interface INavLink {
  id : number; 
  pathLink : string;
  label : string;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent  {
  name = 'Angular';

  selectedNavLink : INavLink;
  navLinks : Array<INavLink> = [
    { pathLink : '/home', label : 'Home', id: 1 },
    { pathLink : '/about', label : 'About', id: 2 }
  ];

  constructor(private router : Router){}

  routeToLink = (event : Event) => {
     this.router.navigate([this.selectedNavLink.pathLink]);

  }

}

从'@angular/core'导入{Component}；
从'@angular/Router'导入{Router}；
导出接口INavLink{
id：编号；
路径链接：字符串；
标签：字符串；
}
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
名称='角度'；
选择导航链接：在导航链接中；
导航链接：数组=[
{pathLink:'/home'，标签：'home'，id:1}，
{路径链接：'/about'，标签：'about'，id:2}
];
构造函数（专用路由器：路由器）{}
routeToLink=（事件：事件）=>{
this.router.navigate（[this.selectedNavLink.pathLink]）；
}
}

app.component.html：

<nav>
    <select (change)="routeToLink()" id="department" name="department" [(ngModel)]="selectedNavLink" class="form-control">
        <option *ngFor="let link of navLinks" [ngValue]="link"> 
          {{link.label}}
        </option>
      </select>
</nav>

{{link.label}

您可以通过在组件中注入

路由器

服务并使用

导航

方法来实现这一点

你的HTML是这样的

<nav>
    <select id="department" name="department" [(ngModel)]="department" class="form-control" (change)="navigate($event.target.value)">
        <option *ngFor="let links of navLinks" [value]="links.path" [routerLink]="links.path" routerLinkActive #rla="routerLinkActive"> 
          {{links.label}}
        </option>
      </select>
</nav>

编辑

routerLink

不适用于您的select控件，因为select没有由routerLink捕获的click事件

// ** Code below is copied from Angular source code on GitHub. **
@HostListener("click")
  onClick(): boolean {
    // If no target, or if target is _self, prevent default browser behavior
    if (!isString(this.target) || this.target == '_self') {
      this._router.navigate(this._commands, this._routeSegment);
      return false;
    }
    return true;
  }

---

有关路由的更多信息

您提供的代码似乎工作正常。到底是什么不起作用？嗨，杰森，谢谢你的评论，我无法加载这些组件，url也没有改变。可能是重复的感谢Asim，但我有一个问题。为什么我要调用这个导航方法，为什么它不能与html中的[routerLink]=“links.path”一起工作？因为routerLink（）是一个监听

onclick

事件的指令，而

不支持它。

// ** Code below is copied from Angular source code on GitHub. **
@HostListener("click")
  onClick(): boolean {
    // If no target, or if target is _self, prevent default browser behavior
    if (!isString(this.target) || this.target == '_self') {
      this._router.navigate(this._commands, this._routeSegment);
      return false;
    }
    return true;
  }