Question

我确实知道Angular的一般结构。执行的第一个文件是main.ts文件。在此文件中，将导入AppModule。在AppModule中，导入了根组件AppComponent。最后，AppComponent位于索引文件的正文标签与服务器提供的一个文件之间。您可以嵌套组件-仅显示一个组件可能有效，但我不知道该怎么做。

我在Google上进行了查询，购买了关于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，这是考虑结构的逻辑，但是我只想显示内容。通常，导航总是显示，但这只是一个例子。那么如何只显示内容。

这个问题很大。感谢您抽出宝贵的时间阅读它并为我提供帮助！

Answer 1

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

上

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

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

NgIf Documentation angular.io

如何在不显示其他组件的情况下加载一个组件

1 个答案: