我正在嘗試根據路線顯示/隱藏 Angular 組件。如果有更簡單的方法，請告訴我。我已經嘗試過很多 stackoverflow 的例子，但似乎都沒有奏效。這是我的代碼。
app.component.html：
<app-nav></app-nav> //shown on all pages
<app-home> </app-home> //shown only on home route ('/')
<app-contact> </app-contact> //shown only on contact route ('/')
導航.component.html：
<div class="contact-open" *ngIf="navStatus == 'contact'">
<button (click)="contactPage()"> Contact </button>
</div>
導航.component.ts：
contactPage() {
this.router.navigate(['/contact']);
}
app-routing.module:
const routes: Routes = [
{ path: '', component: HomeComponent},
{ path: 'contact', component: ContactComponent}
];
理想的情況是，一旦我選擇導航HTML按鈕時，螢屏將變為/接觸途徑（它一定支持），但我想app.component.html，只顯示<app-contact>，而不是<app-home>。
uj5u.com熱心網友回復：
看起來您想使用RouterOutlet。您已經為您的路線設定了正確的組件：
app-routing.module.ts
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'contact', component: ContactComponent }
];
因此，您需要做的就是將router-outlet占位符添加到您的應用程式模板中：
應用程式組件.html
<app-nav></app-nav>
<router-outlet></router-outlet>
一旦你做到了這一點，角將使HomeComponent其中router-outlet是當ActivatedRoute是/，將呈現ContactComponent其中router-outlet是當ActivatedRoute為/contact。
您可以ActivatedRoute通過在瀏覽器的 URL 欄中鍵入所需的路由、在模板中的元素上使用RouterLink指令或使用路由器上的方法之一來設定this.router.navigate(['contact']).
以下是RouterLink在導航中使用指令的效果：
導航組件.html
<a routerLink="/contact">Contact</a>
RouterLink 檔案中有更多示例（包括更高級的用例）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/400342.html
上一篇：為JSON創建正確的介面