路由角度4/5隐藏组件

Question

new to routing with angular 4/5, I am following the angular tutorial on their website. I have an angular application which I want to be able to have two separate pages. Right now main page is localhost:8870/dr3-interface and I want a new page with new components on localhost:8870/dr3-interface/manage_cycles_instances

My issue is when I click on my link Manage cycles instances it shows all my app.component components and not only the components I decided to show on my /manage_cycles_instances . I tried to hide them using *ngIf but without results. Any ideas?

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

Answer 1

Your routes should be this :

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

Because you want to have nested routes, you should make nested routes. Note that your DrThreeComponent should have a router-outlet , since it has children.

You won't need to use conditions in your code, because the router will handle the display of your components.

Explanation :

You start by having an index.html file. It only contains a tag in its body, usually app-root . This tag will be replaced by your bootstraped component, which is usually AppComponent .

If you want to route your application, you will need to use the router . Several steps are required :

1 - Put a router-outlet tag in the component that will route others (here, app component)

2 - Create your routes (you did it, and I corrected it in my answer).

3 - in case of child routes (routes seprated by slashes, like yours), put a router outlet tag in every parent component, and a children property into the corresponding routes.

In your case, if we were to make a tree, this would look like this :

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

So basically, index will show app , then app will show DrThree , then DrThree will show ManageCycles .