html - Routing angular 4/5 menyembunyikan komponen

baru dalam routing dengan angular 4/5, saya sedang mengikuti tutorial angular di situs web mereka. Saya memiliki aplikasi angular yang ingin saya miliki dua halaman terpisah. Saat ini halaman utama adalah localhost:8870/dr3-interface dan saya ingin halaman baru dengan komponen baru di localhost:8870/dr3-interface/manage_cycles_instances

Masalah saya adalah ketika saya mengklik tautan saya Manage cycles instances itu menampilkan semua komponen app.component saya dan bukan hanya komponen yang saya putuskan untuk ditampilkan di /manage_cycles_instances. Saya mencoba menyembunyikannya menggunakan *ngIf tetapi tanpa hasil. Ada ide?

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 {
}

Jawaban #1

Rute Anda seharusnya seperti ini :

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 },
  ]}, 
];

Karena Anda ingin memiliki rute bersarang, Anda harus membuat rute bersarang. Perhatikan bahwa DrThreeComponent Anda harus memiliki router-outlet, karena memiliki anak.

Anda tidak perlu menggunakan kondisi dalam kode Anda, karena router akan menangani tampilan komponen Anda.

Penjelasan :

Anda memulai dengan memiliki file index.html. File ini hanya berisi sebuah tag di dalam body-nya, biasanya app-root. Tag ini akan digantikan oleh komponen yang Anda bootstrap, yang biasanya adalah AppComponent.

Jika Anda ingin mengarahkan aplikasi Anda, Anda perlu menggunakan router. Beberapa langkah diperlukan:

1 - Letakkan tag router-outlet di komponen yang akan merutekan komponen lain (di sini, komponen app)

2 - Buat rute Anda (Anda sudah melakukannya, dan saya memperbaikinya dalam jawaban saya).

3 - dalam kasus rute anak (rute yang dipisahkan oleh garis miring, seperti milik Anda), letakkan tag router outlet di setiap komponen induk, dan properti children ke dalam rute yang sesuai.

Dalam kasus Anda, jika kita membuat pohon, ini akan terlihat seperti ini :

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

Jadi pada dasarnya, index akan menampilkan app, kemudian app akan menampilkan DrThree, lalu DrThree akan menampilkan ManageCycles.