路由 angular 4/5 隐藏组件

Question

新手使用 angular 4/5 进行路由，我正在按照他们网站上的 angular 教程进行操作。我有一个 angular 应用程序，我希望它能够有两个单独的页面。现在主页是 localhost:8870/dr3-interface，我想要一个包含新组件的新页面 localhost:8870/dr3-interface/manage_cycles_instances

我的问题是，当我点击 link 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>

应用程序-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

你的路线应该是这样的：

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 文件。它的主体中只包含一个标签，通常是app-root。此标记将被您的引导组件替换，通常是AppComponent。

如果您想路由您的应用程序，您将需要使用路由器。需要几个步骤：

1 - 在组件中放置一个 router-outlet 标签来路由其他组件（此处为应用程序组件）

2 - 创建你的路线（你做到了，我在我的回答中更正了它）。

3 - 如果是子路由（用斜线分隔的路由，就像你的路由一样），请在每个父组件中放置一个路由器出口标签，并在相应的路由中放置一个 children 属性。

在你的例子中，如果我们要制作一棵树，它看起来像这样：

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

所以基本上，index 将显示 app，然后 app 将显示 DrThree，然后 DrThree 将显示 ManageCycles.

路由 angular 4/5 隐藏组件

Routing angular 4/5 hiding components

html

angular

typescript

angular4-router

解释：