Question

我需要在Angular 5应用程序中显示3个组件（标题，导航栏和菜单项）。我是Angular的新手并且工作如下 -

app.module.ts

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


import { AppComponent } from './app.component';
import { NavigationBarComponent } from './navigation-bar/navigation-bar.component';
import { SendPaymentsComponent } from './send-payments/send-payments.component';

import { RouterModule, Routes } from '@angular/router';
import { TopHeaderComponent } from './top-header/top-header.component';

const appRoutes: Routes = [
 {
path: '',
component: NavigationBarComponent,
children: [
  {
    path: 'send-payments',
    component: SendPaymentsComponent
  }
]
 }
];

@NgModule({
  declarations: [
    AppComponent,
    NavigationBarComponent,
    SendPaymentsComponent,
    TopHeaderComponent
  ],
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

app.component.html

<app-top-header></app-top-header>
<app-navigation-bar></app-navigation-bar>
<router-outlet></router-outlet>

假设navigation-bar.component.html有html代码来显示带有某些菜单项（付款）的导航栏。 'send-payments.component.html'包含显示付款的数据。

在访问“localhost：4200”时，我想显示top-header和导航栏组件。我无法在app.module.ts和app.component.html

中添加top-header组件

在app.component.html中添加两次导航栏的相同html。

Answer 1

您可以尝试此解决方案

我在stackblitz

上创建了一个演示

ts文件代码

const app_routes: Routes = [
  {
    path: '',
    redirectTo: '/payment',
    pathMatch: 'full'
  }, {
    path: 'login',
    component: LoginComponent
  }, {
    path: 'payment',
    children: [
      {
        path: '',
        redirectTo: '/send-payments',
        pathMatch: 'full'
      },
      {
        path: 'send-payments',
        component: SendPaymentComponent
      },
      {
        path: 'get-payments',
        component: GetpaymentComponent
      },
      {
        path: 'others',
        component: OtherComponent
      },

    ]
  }
];

Angular 5路由 - 标头和导航栏路由问题

1 个答案: