想要使用 Angular 6 和路由根据下拉值显示组件
Wanted to show component based on the drop down value using Angular 6 and Routing
我是 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>
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>
您可以通过在组件中注入 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
不适用于您的 select 控件,因为 select 没有由 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;
}
更多关于路由的信息here
我是 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>
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>
您可以通过在组件中注入 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
不适用于您的 select 控件,因为 select 没有由 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;
}
更多关于路由的信息here