angular - 如何加载一个组件而不显示其他组件

问题描述

我确实知道 Angular 的一般结构。执行的第一个文件是 main.ts 文件。在此文件中导入 AppModule。在 AppModule 中，根组件 AppComponent 被导入。最后，AppComponent 位于索引文件的主体标签之间 - 由服务器提供的一个文件。您可以嵌套组件 -单独显示一个组件可能会起作用，但我不明白如何。

我在谷歌上查过，买了一个关于udemy的在线课程（但刚刚完成了一小部分）——我什么也没找到。我敢打赌，解决方案是微不足道的，我只是不擅长查找东西......

以下代码只是自由式编码以使我的问题清楚，所以对你们来说可能没有意义。

由于应该如何编写问题的奇怪结构，我按顺序编写了以下文件名，以便您知道哪些代码属于哪个文件。

1.app.component.html

2.nav.component.html

3.content.component.html

4.app-routing.module.ts

<app-nav></app-nav>
<router-outlet></router-outlet>



<h1>Nav</h1>
 <ul>
   <li><a routerLink="/content">Content</a></li>
 </ul>



 <p>
  content works!
 </p>



const routes: Routes = [
  { path: "content", component: ContentComponent}
];

点击链接，会显示content.component.html，但也会显示nav.component.html，考虑结构是合乎逻辑的，但我只想显示内容。通常总是显示导航，但这只是一个例子。那么如何只显示内容。

这个问题变得很大。感谢您花时间阅读并尝试帮助我！

标签： angularmodulecomponents

您可以在 app.component.html 上使用结构指令 *ngIf

<app-nav *ngIf="condition"></app-nav>

当“condition == false”导航组件不会显示时，条件将是 app.component.ts 上的布尔变量。

NgIf 文档 angular.io

angular - 如何加载一个组件而不显示其他组件

问题描述

解决方案

推荐阅读