Как вызвать дочерний компонент (просмотр ) и роутер-выход в родительском компоненте

Question

Мне нужно, чтобы в разделе были и маршрутизатор-выход, и дочерний компонент. есть ли способ сделать это с использованием маршрутизации

родительский компонент (HTML) - app.component. html

<ul *ngFor="let report of repcategory.Reports">
    <li>
      <a href="" class="nav-link py-1"                      
       (click)="viz(report.Link,report.Name,report.helpfile,report.helpvideo)">                        
       {{report.Name}}
      </a>
    </li>
</ul>
<div>
     <section>
      <app-viz [showreportEvent]="showreportEvent.asObservable()"></app-viz> //child component          
      <router-outlet></router-outlet>
     </section>
</div>

parent component (ts) -app.component. тс

viz(x,y,z,z2) {
    this.showreportEvent.next({repurl: x, repname: y}); 
}

Answer 1

Это можно сделать, прослушивая события изменения маршрутизатора:

constructor(router: Router) {
  // all router events
  router.events
    // filter events other than navigationStart out
    .filter(event => event instanceof NavigationStart)
    // subscribe to the result
    .subscribe(event => {
      // set showreportEvent to null
      this.showreportEvent.next(null);
    });
}

Затем все, что вам нужно сделать в <app-viz>, - это проверить, является ли наблюдаемая null. Если он имеет значение null, скрыть содержимое.

В противном случае вы всегда можете просто использовать ngIf на <app-viz>.