Question

2019-11-25

1058

javascript html angular typescript

我有一个按钮，单击后会转到新路由并打开附加到该路由的另一个组件。

在 Angular 中，有没有办法从 DOM 中删除我们单击以转到不同组件的组件？示例：单击“单击我返回主页”按钮时，会打开另一个组件。在这种情况下，一旦打开新组件，就从 DOM 中删除“单击我返回主页”按钮。但是当我通过点击某个后退按钮从下一个组件导航时应该将其添加回来。

HTML：

<button (click)=goTo()>Click Me to go to home</button>

TS：

goTo() {
    // to hide the URL from being visible
    this.router.navigate(['/home'], { skipLocationChange: true });
  }

路线：

const appRoute: Routes = [
  { path: 'home', component: HomeComponent},
]

任何帮助都将不胜感激。

Answer 1

如果您想使用两个组件以正确的方式执行此操作，则可以通过以下方式在 appRoutes 中更合乎逻辑地添加路径：

const appRoute: Routes = [
 { path: '', component: ClickButtonComponent},
 { path: 'home', component: HomeComponent}
]

并且只让您的 app.component.html 中的默认根指令 < router-outlet > 处理从 ClickButtonComponent 到 HomeComponent 的导航：)

您可以在 home 组件中添加“后退按钮”，并使用一个函数调用路由器通过以下方式导航到第一个组件（click-button） this.router.navigate(['/']);