组件未在Angular5路由中呈现

Question

我有Angular5应用程序。这就是我的app.module.ts的样子。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { BrandComponent } from './brand/brand.component';




const appRoutes: Routes = [

{
 path: 'brand',
 component: BrandComponent,
 data: { title: 'Brands' }
},
{
 path: '',
 component: AppComponent,
 pathMatch: 'full'
},];
@NgModule({
 declarations: [
 AppComponent,
 BrandComponent
],
imports: [
  BrowserModule,
  FormsModule,
  RouterModule.forRoot(
  appRoutes,

  {
    enableTracing: true,
    useHash: true
  } // <-- debugging purposes only
)
],
 providers: [],
 bootstrap: [AppComponent]
 })



 export class AppModule {}

我的app.component.html如下所示。

<div style="text-align:center">
<h1>
  Welcome to {{ title }}!
</h1>
</div>

<nav>
 <a routerLink="" routerLinkActive="Home">Home</a>
 <a routerLink="/brand" routerLinkActive="active">Brand</a>
</nav>
<div>
      <router-outlet></router-outlet>
</div>

问题-如果单击品牌链接或任何路径，则始终呈现home组件。

控制台中没有错误

谢谢。

Answer 1

您可以尝试此解决方案

我已经在stackblitz上创建了一个演示

app.module.ts

const routes: Routes = [
    { path: "", redirectTo: 'home', pathMatch: "full" },
    { path: "home", component: HomeComponent },
    { path: "brand", component: BrandComponent },
];

@NgModule({
    imports: [BrowserModule, FormsModule, RouterModule.forRoot(routes)],
    declarations: [AppComponent, HomeComponent, BrandComponent],
    bootstrap: [AppComponent]
})

app.component.html

<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-secondary" routerLink="/home">Home</button>
    <button type="button" class="btn btn-secondary" routerLink="/brand">Brand</button>
</div>


<router-outlet></router-outlet>

Answer 2

这就是我的设置方式。

我有一个名为app-routing.module.ts的文件，看起来像这样：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ConfigComponent } from './pages/config/config.component';
import { AuthComponent } from './modules/auth/auth/auth.component';
import { AuthendComponent } from './modules/auth/authend/authend.component';
import { HomeComponent } from './pages/home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'config', component: ConfigComponent },
  { path: 'auth', component: AuthComponent },
  { path: 'authend', component: AuthendComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

然后在我的app.module.ts内部导入该文件

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

所以我的app.module.ts看起来像这样

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ConfigComponent } from './pages/config/config.component';
import { AuthModule } from './modules/auth/auth.module';
import { HomeComponent } from './pages/home/home.component';


@NgModule({
  declarations: [
    AppComponent,
    ConfigComponent,
    HomeComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    AuthModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

而app.component.html看起来像这样：

<router-outlet></router-outlet>

对于链接，您将希望它看起来像这样：

<li routerLink="/config">Config</li>
<li routerLink="/auth">Auth</li>