Angular组件通信问题：侧边栏选项如何传递给Dashboard加载对应组件

嘿，我帮你找到了代码里的几个关键问题，一步步来修复就好啦：

1. 导航组件没绑定点击事件 #

你现在的nav.component.html只是把选项渲染出来了，但没给每个选项加点击触发逻辑——点击选项时根本不会调用selectOption方法，自然也不会向外发送optionSelected事件。

2. Dashboard组件缺少响应事件的必要逻辑 #

Dashboard里既没有定义用来存储选中选项的变量，也没实现selectOption方法来接收导航组件传过来的事件值，就算导航组件发了事件，Dashboard也接不住呀。

修复后的完整代码 #

第一步：给导航组件的选项加点击事件 #

修改nav.component.html，给每个<li>绑定click事件，把当前选项传给selectOption方法：

<ul class="list-group">
  <li 
    *ngFor="let option of options" 
    class="list-group-item"
    (click)="selectOption(option)"
  >
    {{option.title}}
  </li>
</ul>

第二步：完善Dashboard组件的逻辑 #

修改dashboard.component.ts，新增存储选中选项的变量，以及接收事件的方法：

export class DashboardComponent implements OnInit {
  // 确保ACTIVATE_VENDOR、DEACTIVATE_VENDOR是你定义的常量，已正确导入
  options = {
    ACTIVATE_VENDOR: ACTIVATE_VENDOR,
    DEACTIVATE_VENDOR: DEACTIVATE_VENDOR
  };
  selectedOption: any; // 用来存选中的选项

  constructor() { }
  ngOnInit() { }

  // 接收导航组件传递过来的选项
  selectOption(option: any) {
    this.selectedOption = option;
  }
}

第三步：修正Dashboard模板的判断条件 #

原来模板里用optionSelected（事件名称）来判断是错的，要改成我们刚定义的selectedOption变量，同时注意和常量的匹配逻辑：

<breadcrumbs></breadcrumbs>
<div class="row vertical-center">
  <div class="col-3">
    <app-navigation (optionSelected)="selectOption($event)"></app-navigation>
  </div>
  <!-- 假设你的option对象里有key字段对应常量，要是结构不同就调整判断逻辑 -->
  <div *ngIf="selectedOption?.key === options.ACTIVATE_VENDOR" class="col-9">
    <app-activate-vendor></app-activate-vendor>
  </div>
  <div *ngIf="selectedOption?.key === options.DEACTIVATE_VENDOR" class="col-9">
    <app-deactivate-vendor></app-deactivate-vendor>
  </div>
</div>

额外小提示 #

• 要是你的nav_links里的选项直接就是ACTIVATE_VENDOR这类常量，那*ngIf里直接写selectedOption === options.ACTIVATE_VENDOR就行
• 可以给选中的导航选项加个高亮样式，比如在导航组件的<li>上绑定[class.active]="selectedOption === option"，同时在nav.component.ts里加个selectedOption变量跟踪选中状态，用户体验会更好~

内容的提问来源于stack exchange，提问作者user2004