如何调用子组件（在父组件中查看 ]和路由器出口

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>

父组件（ts）-app.component.ts

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>。