Question

我正在使用nebular的akveo框架。

其中一个组件是context menu，它会创建一个弹出菜单，其选项是从数组中读取的

items = [{ title: 'Profile' }, { title: 'Log out' }];

我想导航到另一个屏幕，但是教程主要讨论routerLink

<p>This is my link <a routerLink="/getMeOut">out</a></p>

但是在这种情况下，我无法添加<a>标签，因为它们抽象了click事件并允许您订阅

this.menuService.onItemClick()
  .pipe(
    filter(({ tag }) => tag === 'my-context-menu'),
    map(({ item: { title } }) => title),
  )
  .subscribe(title => {
    console.error(`${title} was clicked!`)
  });

当单击每个按钮时会打印出来，但是我必须在.subscribe()函数内部触发导航。

该怎么做？

Answer 1

首先，外部路由必须存在于某些路由模块中。

// app-routing.module.ts
const routes: Routes = [
  { path: 'getMeOut', component: OutComponent },
  ..
]

那么需要四件事

从@angular/router导入路由器。
在构造函数private router: Router中创建一个专用路由器。
使用所需的路线致电navigateByUrl()。
使用nbContextMenuTag属性标识上下文菜单。

然后，在包含上下文菜单的模块中，我们创建路由器以像这样处理导航

// awesome.component.ts
import { Router } from '@angular/router'
import { NbMenuService } from '@nebular/theme';

@Component({
  selector: 'awesome',
  styleUrls: ['./awesome.component.scss'],
  templateUrl: './awesome.component.html',
})

ngOnInit() {
  this.menuService.onItemClick()
  .pipe(
    filter(({ tag }) => tag === 'my-context-menu'),
    map(({ item: { title } }) => title),
  )
  .subscribe(title => {
    if (title === 'Log out') this.router.navigateByUrl('/getMeOut');
    console.error(`${title} was clicked!`)
  });
}

constructor(
  private menuService: NbMenuService,
  private router: Router) {
}

查看@angular/router中navigateByUrl的简单用法。

只需将nbContextMenuTag="my-context-menu"添加到html模板

<nb-action *nbIsGranted="['view', 'user']" >
 <nb-user nbContextMenuTag="my-context-menu"></nb-user>
</nb-action>

我希望这不是骗子。我找到了this答案，但这意味着更多有关嵌套路由器的信息。

如何在angular2中不使用routerLink导航到路线

1 个答案: