想要根据Angular 6和路由显示基于下拉值的组件

Question

我是Angular的新手。

我想使用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>

Answer 1

routerLink和 routerLinkActive无法使用select开箱即用。将所选值绑定到元素，然后在select上导航。这是完整的解决方案：https：//stackblitz.com/edit/angular-ualqhw

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]);
  }
}

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>

Answer 2

您可以通过在组件中注入Router服务和使用navigate方法

来实现此目标

您的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>

您的组件看起来像这样：

export class AppComponent  {
  navLinks = [
    { path : 'home', label : 'Home', id: 1 },
    { path : 'about', label : 'About', id: 2 }
  ];
  name = 'Angular';
  constructor(private router: Router) {
  }
  navigate(path) {
    this.router.navigate(['/' + path])
  }
}

编辑

routerLink对您的选择控件不起作用，因为选择没有单击事件，该事件由Routerlink捕获

// ** 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;
  }

更多关于路由在此处