html - Angular 4/5 路由隱藏元件

我對 Angular 4/5 的路由還是新手，我正在跟隨他們網站上的 Angular 教學。我有一個 Angular 應用程式，我希望它能有兩個獨立的頁面。現在主頁是 localhost:8870/dr3-interface，我希望另一個頁面有新的元件，網址是 localhost:8870/dr3-interface/manage_cycles_instances

我的問題是，當我點擊我的連結 Manage cycles instances 時，它會顯示我所有的 app.component 元件，而不只是我決定在 /manage_cycles_instances 上顯示的元件。我試過使用 *ngIf 來隱藏它們，但沒有結果。有人有什麼建議嗎？

app.component.html ：

<div style="text-align:left">
  <h1>{{ title }}</h1>
</div>

<nav>
  <a routerLink="/manage_cycles_instances" routerLinkActive="active"> Manage cycles instances</a>
</nav>
<router-outlet></router-outlet>

<div *ngIf="router = '/dr3-interface'">
  <h2><d-table></d-table></h2>
</div>
<br/>
<form-upload></form-upload>
<br/>
<list-upload></list-upload>

app-routing.module.ts ：

import { NgModule }              from '@angular/core';
import { RouterModule, Routes }  from '@angular/router';

import { DataTableComponent }   from './datatable/data-table.component';


const appRoutes: Routes = [
  { path: 'manage_cycles_instances', component: DataTableComponent },
  /* TO DO : page error
  { path: '**', component: ... }
  */
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}

app.module.ts ：

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import {
 //all material modules
} from '@angular/material';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { DataTableComponent } from './datatable/data-table.component';
import { DetailsUploadComponent } from './upload/details-upload/details-upload.component';
import { FormUploadComponent } from './upload/form-upload/form-upload.component';
import { ListUploadComponent } from './upload/list-upload/list-upload.component';

@NgModule({

  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule,
    //material modules
  ],
  declarations: [
    AppComponent,
    DataTableComponent,
    DetailsUploadComponent,
    FormUploadComponent,
    ListUploadComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

答案＃1

你的路線應該是這樣：

const appRoutes: Routes = [
  { path: 'dr3-interface', component: DrThreeComponent, children: [ // I don't know which component to use for this route
    { path: 'manage_cycles_instances', component: DataTableComponent },
  ]}, 
];

因為你想要有巢狀路由，所以你應該建立巢狀路由。注意你的 DrThreeComponent 應該有一個 router-outlet，因為它有子路由。

你不需要在程式碼中使用條件，因為路由器會處理你的組件的顯示。

說明：

你從擁有一個 index.html 文件開始。它的 body 中通常只包含一個標籤，通常是 app-root。這個標籤將會被你已啟動的元件取代，通常是 AppComponent。

如果您想為您的應用程式設置路由，您將需要使用 router。需要若干步驟：

1 - 在將要路由其他組件的組件中放置一個 router-outlet 標籤（此處為 app 組件）

2 - 創建你的路由（你已經做了，我在我的回答中已經更正了它）。

3 - 在有子路由的情況下（以斜線分隔的路由，如你的情況），在每個父組件中放置一個 router outlet 標籤，並在對應的路由中加入 children 屬性。

在你的情況下，如果我們要做一棵樹，它會看起來像這樣：

index.html
  |
  |--app component (with router outlet)
       |
       |--DrThree component (with router outlet)
            |
            |--ManageCycles component

所以基本上，索引會顯示應用程式，然後 應用程式會顯示 DrThree，接著 DrThree 會顯示 ManageCycles。