Angular 角度5，两个组件在同一页上

我想看看是否还有其他组件可以在我所在的页面上呈现。我有：

<button mat-button color="primary" [routerLink]="['/tripspath', trip.tripId]" style="cursor: pointer">View Route</button>

---

但问题是我不希望它导航到另一个页面。我希望它保持在同一页上，只显示当前内容下方的框（路由）。

我想您正在寻找一种显示嵌套路由的方法。 检查下面的文章，它会帮助你

---

我想您正在寻找一种显示嵌套路由的方法。 检查下面的文章，它会帮助你

---

不要使用路由器链接。嵌入带有*ngIf属性的组件，该属性由开始隐藏的按钮切换。

不要使用路由器链接。嵌入带有*ngIf属性的组件，该属性由开始隐藏的按钮切换。

然后必须在按钮后面添加要显示的元素，并使用

*ngIf

显示或隐藏组件

<button mat-button color="primary" (click)="showComponent()" style="cursor: pointer">View Route</button>
<trip-component *ngIf="trip.tripId==25"></trip-component>

---

可以是自定义组件，也可以只是一个简单的div元素，其中包含要显示的代码。

然后必须将要显示的元素添加到按钮后面，并使用

*ngIf

显示或隐藏组件

<button mat-button color="primary" (click)="showComponent()" style="cursor: pointer">View Route</button>
<trip-component *ngIf="trip.tripId==25"></trip-component>

---

可以是自定义组件，也可以只是一个简单的div元素，其中包含要显示的代码。

如果不想将其导航到其他页面，则应使用子路由。

---

单击该链接以查看场景的工作示例。

如果不想将其导航到其他页面，则应使用子路由。

---

单击链接以查看场景的工作示例。

我在考虑ngIf，但关键是我希望在单击按钮后立即呈现它。该按钮正在将tripId传递给路由器。这就是为什么我将click事件放在那里。您可以将id作为参数发送，并且您将使用id显示您想要的内容，例如

*ngIf=“trip.tripId>0”

然后，您可以看到componentI考虑的是ngIf，但关键是我希望在单击按钮后呈现它。该按钮正在将tripId传递给路由器。这就是为什么我将click事件放在那里。您可以将id作为参数发送，并且您将使用id显示所需内容，例如

*ngIf=“trip.tripId>0”

，然后您显示组件

showComponent(){
   trip.tripId=25;
}