javascript - 单击后如何删除 Angular 分量？

Question

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

有没有一种方法可以从 DOM 中删除我们单击以转到不同组件的组件？示例:当单击“单击我返回主页”按钮时，它会打开另一个组件。在这种情况下，一旦打开新组件，请从 DOM 中删除“Click Me to go to home”按钮。但是当我通过点击后退按钮从下一个组件导航时应该添加回来。

这是code working in stackblitz :

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 组件中添加“后退按钮”，并使用一个函数调用路由器以这种方式导航到第一个组件(单击按钮) this.router.navigate(['/']);