了解父母-儿童沟通的角度

Question

我有一个组件，然后是另一个正在使用它的组件，并且通过更改制表符将数据相互解析，我想要做的是当离开页面但按下返回按钮时要记住该选项卡，要做到这一点，我需要了解数据流，其功能是相同的，因此很难确定发生了什么！

例如，它们都使用@Input，并且当我按一个选项卡时，如果我添加一个，两个功能都在控制台？

组件：

<div class="EngagementNavigationSecondary-Items" 

*ngIf="!selectedIndividual">
  <span
    *ngFor="let item of navList; let i = index"
    class="EngagementNavigationSecondary-Item"
    [ngClass]="{ 
      'EngagementNavigationSecondary-Item--Active': selectedItem === i,
      'EngagementNavigationSecondary-Item--One' : navList.length === 1,
      'EngagementNavigationSecondary-Item--Two' : navList.length === 2,
      'EngagementNavigationSecondary-Item--Three' : navList.length === 3
    }"
    (click)="clickTab(i)">
    {{ item.title | translate }}
  </span>
</div>
<div *ngIf="selectedIndividual">
  <span class="EngagementNavigationSecondary-Item" (click)="goBack()">
    <tl-icon
      size="18"
      name="chevron-left">
    </tl-icon>
    {{ 'Go back' | translate }}
  </span>
</div>

逻辑：

export class EngagementNavigationSecondaryComponent implements OnInit {


 @HostBinding('class.EngagementNavigationSecondary') block = true;
  @Input() navList: EngagementNavigationItem[];
  @Input() selectedItem: number = 0;
  @Input() selectedIndividual: string;

  @Output() change: EventEmitter<number> = new EventEmitter<number>();
  @Output() deselectIndividual: EventEmitter<boolean> = new EventEmitter<boolean>();

  className: string;

  ngOnInit() {
    this.className = `EngagementNavigationSecondary-Item${this.navList.length}`;
  }

  goBack() {
    this.deselectIndividual.emit(true);
  }

  clickTab($event: number) {
    this.selectedItem = $event;
    this.change.emit($event);
  }
}

现在正在使用此组件-在侧面容器组件中：

<tl-engagement-navigation-secondary
  *ngIf="navList"
  [navList]="navList"
  [selectedItem]="selectedTab"
  [selectedIndividual]="selectedIndividual"
  (change)="tabChange($event)"
  (deselectIndividual)="selectedIndividual = undefined">
</tl-engagement-navigation-secondary>

逻辑：

export class EngagementSideContainerComponent implements OnChanges, OnInit {
  @Input() focus: EngagementGraphNode;
  @Input() selectedTab: number;
  @Output() change: EventEmitter<number> = new EventEmitter<number>();

  public navList: EngagementNavigationItem[];
  public selectedIndividual: EngagementUser;

  constructor(
    private urlService: UrlService,
    private router: Router,
    private mixPanelService: MixPanelService,
    private engagementService: EngagementService
  ) { }

  ngOnInit() {
    this.navList = this.getNavList();
  }

  tabChange(event) {
    this.change.emit(event);
  }

如您所见，它们基本上是相同的，所以当我单击一个选项卡时，是否调用了原始组件，然后将数据解析到侧面容器组件？我认为理解它很重要，这样我才能真正创建解决方案。

感谢您的帮助！