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

Question

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

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

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

这是我想要的例子：

Answer 1

您可以定义子路线，在其中定义组件。在您的父组件/路由中，声明一个路由器出口标签。

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

您可以在此处进行更多探索-https://alligator.io/angular/angular-router-child-routes/

Answer 2

您将不得不在第二个组件的选择器上使用ngIf

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

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

单击按钮后，将boolean设置为true以显示该组件。

.ts第一个组件

changeBoolean()
{
    this.showComponent = true;
}

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

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