Question

我有4个组件-仪表板（父级）和sidenav，激活，停用从sidenav中选择一个选项后，我希望仪表板加载激活/停用组件。

如何将选择的选项从sidenav发送到仪表板？

我尝试为optionSelected发出事件，但不起作用这是我到目前为止尝试过的

dashboard.component.ts

 export class DashboardComponent implements OnInit {

      options = [ACTIVATE_VENDOR, DEACTIVATE_VENDOR]; 

      constructor() { }

      ngOnInit() {

      }

dashboard.component.html

 <breadcrumbs></breadcrumbs>
    <div class="row vertical-center">
        <div class="col-3">
            <app-navigation (optionSelected)="selectOption($event)"></app-navigation>
        </div>

        <div *ngIf="optionSelected == options.ACTIVATE_VENDOR" class="col-9">
            <app-activate-vendor></app-activate-vendor>
        </div>
        <div *ngIf="optionSelected == options.DEACTIVATE_VENDOR" class="col-9">
            <app-deactivate-vendor></app-deactivate-vendor>
        </div>
    </div>

nav.component.ts

export class NavigationComponent implements OnInit {

  @Output() optionSelected: EventEmitter<any> = new EventEmitter();
  options = nav_links;

  constructor() { }

  ngOnInit() {
  }

  selectOption(option) {

    this.optionSelected.emit(option);
  }

nav.component.html

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

Answer 1

似乎您缺少了一些东西...您需要捕获导航组件中的点击，以便某些东西可以触发发射：

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

不确定整个选项应该在此处发出还是只是其属性出现，然后您需要在仪表板组件中处理事件：

  options = [ACTIVATE_VENDOR, DEACTIVATE_VENDOR]; 

  constructor() { }

  ngOnInit() {

  }

  optionSelected: any;

  selectOption(option) {
    this.optionSelected = option;
  }

通过这种方式，您实际上已将事件发射器连接到接收组件中的某个东西。

选择一个选项后加载组件

1 个答案: