如何使用 Angular 打开另一个组件而不显示第一个组件？答案

【问题标题】：How do I open another component using Angular without displaying the first one?如何使用 Angular 打开另一个组件而不显示第一个组件？
【发布时间】：2021-11-10 06:05:09
【问题描述】：

我是 Angular 世界的新手，希望这个问题有意义：

假设我在 app.component.html 下有一个部分：

section id="zoo">动物园/section>

现在我使用以下命令创建另一个组件（动物园）：

ng g c动物园

这将为动物园创建 4 个新文件。

我现在想要的是点击将我重定向到创建的动物园页面的部分（动物园），并且只显示该页面的内容。

我该怎么做？

【问题讨论】：

可以分享一下涉及到的源代码文件吗？

标签： angular angular-components

【解决方案1】：

首先创建一个像这样{ path: 'zoo', component: ZooComponent } 的新路由。然后将您的 html 更改为 <section id="zoo" routerLink="/zoo">Zoo</section>

【讨论】：

嗨 Juaasca，感谢您的评论，但我已经尝试过了。它显示 app.component.html 和 zoo.component.html 的内容。我只想在选择时显示 zoo.component.html 的内容。
需要实现路由器出口。你实施了吗？
app.component.html 总是显示，因为它有对吗？您需要一个 app.routes.ts 或类似的东西，它取决于角度版本，来呈现您的自定义组件。欲了解更多信息angular.io/guide/router
通过您的树项目的一些屏幕截图，我们可以帮助您更轻松
嗨，理查德，是的，我已经实现了路由器插座。我将在下面分享一些屏幕截图以便您更好地理解：我的 app.component.html 代码：
Zoo
outlet> app-routing.module.ts: const routes: Routes = [ { path: 'zoo', component: ZooComponent } ];