在 Angular 的同一页面上显示视图答案

【问题标题】：Displaying a view on the same page in Angular在 Angular 的同一页面上显示视图
【发布时间】：2018-12-10 08:45:13
【问题描述】：

我想在单击按钮时在 Angular 应用程序的同一页面上显示一个视图。

页面不应在新页面中打开，而应显示在同一页面中，位于现有页面元素下方。

如何在 Angular 中使用路由来做到这一点？

这是我想要的插图：

【问题讨论】：

看这里：stackoverflow.com/questions/44741936/…
您可以创建 view2 并在点击时显示它，或者您可以动态创建它。我不完全明白你想如何通过路由来做到这一点，你能给我们更多关于你想怎么做的信息吗？
我想通过路由来实现，因为我还想更改页面的 URL，同时只将视图保持在同一页面中。

标签： javascript angular routing

【解决方案1】：

您可以定义一个子路由，您可以在其中定义一个组件。在你的父组件/路由中，声明一个 router-outlet 标签。

当您导航到子路由/URL 时，子组件将适合其父组件的 router-outlet 标记。

您可以在这里探索更多 - https://alligator.io/angular/angular-router-child-routes/

【讨论】：

【解决方案2】：

您必须在第二个组件的选择器上使用 ngIf

<button  (click)="changeBoolean()">

    <selector-second-component *ngIf="showComponent">  <selector-second-component>

单击按钮时，您会将布尔值设置为 true 以显示该组件。

.ts 第一个组件

changeBoolean()
{
    this.showComponent = true;
}

如果您的组件来自其他模块，则必须导入该模块并从该模块导出您的组件。

【讨论】：

当用户点击按钮时我需要这样做。
据了解，您需要在按钮单击时更改布尔值

【解决方案3】：

遵循 Ankit Sharma 提供的link。这是您需要做的。

定义子路由就是添加一个额外路由数组配置对象作为父项中子项的一部分配置

const routes: Routes = [
  { path: '', component: ParentComponent, children: [
    { path: 'view-one', component: ViewOneComponent },
    { path: 'view-two', component: ViewTwoComponent }
  ] }
];

并且，确保您在任何父组件的模板中添加 router-outlet 指令。

<router-outlet></router-outlet>

【讨论】：