面试题：Angular中如何实现指令与路由结合以创建简单的动态导航菜单

Question

在Angular项目中，假设已有一些路由配置，如首页、关于我们、产品列表等路由。请阐述如何创建一个指令，该指令能够根据当前路由动态生成一个导航菜单，并且当用户点击菜单项时能正确导航到对应的路由页面。简要说明指令的结构、与路由交互的关键代码以及实现思路。

Answer 1

1. 指令结构：
   • 装饰器：使用@Directive装饰器来定义指令，指定选择器，例如selector: '[appDynamicMenu]'。
   • 输入属性：可能需要输入当前路由配置相关的数据，比如路由配置数组。
   • 模板：在指令的模板中生成导航菜单的HTML结构，通常是ul和li标签组成的列表。
2. 与路由交互的关键代码：
   • 引入路由服务：在指令的构造函数中注入Router服务，例如constructor(private router: Router) {}。
   • 点击事件处理：在模板的菜单项li标签上绑定点击事件，如<li *ngFor="let route of routes" (click)="navigateTo(route)">{{route.title}}</li>。然后在指令类中定义navigateTo方法：

   navigateTo(route: any) {
       this.router.navigate([route.path]);
   }
   

3. 实现思路：
   • 获取路由配置：可以从外部传入路由配置数据，也可以从RouterModule相关的配置中获取。
   • 生成菜单：利用*ngFor指令遍历路由配置数据，生成对应的菜单项。
   • 绑定点击事件：为每个菜单项绑定点击事件，在事件处理函数中使用Router服务的navigate方法导航到对应的路由路径。
   • 动态更新：可以通过订阅Router.events来监听路由变化，从而动态更新菜单状态，比如添加当前激活菜单项的样式。例如：

   constructor(private router: Router) {
       this.router.events.subscribe((event) => {
           if (event instanceof NavigationEnd) {
               // 根据当前路由更新菜单样式等操作
           }
       });
   }