瓷砖将是可点击的对象，当单击时，它们将打开一个单独的页面，而不是相同的页面角度。

Question

输出

我的应用程序组件代码是

<H1>AI API DEMOS</H1>
<div>
  <ul>
    <li  class="active"><a routerLink="/market">Market Size</a></li>
    <li role="presentation" class="active"><a routerLink="/enrich">Enriched Tags</a></li>
    <li role="presentation" class="active"><a routerLink="/tbd">TBD</a></li>
    <li role="presentation" class="active"><a routerLink="/tbd">TBD</a></li>
    <li role="presentation" class="active"><a routerLink="/tbd">TBD</a></li>
    <li role="presentation" class="active"><a routerLink="/tbd">TBD</a></li>
  </ul>
</div>
<router-outlet></router-outlet>

enrich.html：

<h1>enrich</h1>

想要的输出:当我只点击“充实标签”，只会显示组件HTML部件。没有标题。"AI API演示“和无序的路由列表。

Answer 1

将标题和列表移动到另一个组件，比如HomeComponent。在AppComponent，只需保留<router-outlet>。使用这样的路线：

const appRoutes: Routes = [
    { path: '', component: HomeComponent }
    { path: 'enrich', component: PostComponent},
    { path : 'market', component: MarketComponent},
    { path: 'tbd', component: TBDComponent } 
]