Понимание Родителя - Детское общение Angular

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);
  }

как вы можете видеть, они в основном идентичны, поэтому, когда я нажимаю на вкладку, вызывается ли исходный компонент, а затем выполняется синтаксический анализ данных для компонента бокового контейнера?Я думаю, что это важно понять, поэтому я действительно могу создать решение.

спасибо, если вы можете помочь!