Компонент не отображается в маршрутизации Angular5 - PullRequest
Новая
       35

Компонент не отображается в маршрутизации Angular5

0 голосов
/ 26 июня 2018

У меня 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>

Проблема - Если я нажимаю на ссылку бренда или любой путь, всегда отображается домашний компонент.

Нет ошибок в консоли

Спасибо.

Ответы [ 2 ]

0 голосов
/ 26 июня 2018

Вот так у меня настроено.

У меня есть файл с именем 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>
0 голосов
/ 26 июня 2018

вы можете попробовать это решение

Я создал демо на 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>
...