如何在父组件中调用子组件（查看<child-app>）和router-outlet答案

【问题标题】：How to call child component(view <child-app>) and router-outlet in parent component如何在父组件中调用子组件（查看<child-app>）和router-outlet
【发布时间】：2020-08-21 18:37:38
【问题描述】：

我需要路由器插座和子组件都在该部分中。有什么办法可以使用路由来做到这一点

父组件(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}); 
}

【问题讨论】：

那么你想要一条路线来显示两个不同的组件吗？
嘿@DaneBrouwer，有点，我需要孩子在路由器插座中，如果我写任何其他路由，它们也应该代替
您希望它显示在每条路线上吗？还是只针对特定的？
你目前应该如何工作，有什么问题？
在
中，每当我单击任何
项时，我都需要显示，并且当应用程序中出现任何路由器链接时，应将它们路由到 router-outlet在同一部分，隐藏

标签： javascript angular routes angular2-routing

【解决方案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> 中你需要做的就是检查observable 是否是null。如果为null，则隐藏内容。

否则，您总是可以在 <app-viz> 上使用 ngIf。

【讨论】：