javascript - Angular ruting/navigasjon fungerer ikke riktig: Legger til i stedet for å erstatte komponent

Dette spørsmålet har blitt stilt før, men ingen av svarene ser ut til å hjelpe meg. Jeg kan ikke rute til forskjellige sider i Angular, i stedet legger det bare til HTML-en til ønsket komponent på slutten av hjemmesiden min. Her er koden min:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ToggleFullscreenDirectiveDirective } from './toggle-fullscreen-directive.directive';
import { HttpClientModule } from '@angular/common/http';
import { AnnouncementsComponent } from './announcements/announcements.component';
import { AdminComponent } from './admin/admin.component';
import { RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';




    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ToggleFullscreenDirectiveDirective } from './toggle-fullscreen-directive.directive';
import { HttpClientModule } from '@angular/common/http';
import { AnnouncementsComponent } from './announcements/announcements.component';
import { AdminComponent } from './admin/admin.component';
import { RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';



@NgModule({
  declarations: [
    AppComponent,
    ToggleFullscreenDirectiveDirective,
    AnnouncementsComponent,
    AdminComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot([
      { path: '', component: AppComponent },
      { path: 'admin', component: AdminComponent }

    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})





export class AppModule { }

app.component.html

...My custom html
<router-outlet></router-outlet>

index.html

 <!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angular Bootstrap Demo</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
  <app-root>Loading...</app-root>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>
</html>

Basert på andre svar kan problemet være med importene. Jeg prøvde å fjerne noen som jeg brukte i koden, som bytte fullskjermmodus. En annen mulighet er at det kan være en konsollfeil, som jeg sjekket, og det er ikke noe problem. Kan noen hjelpe meg? Jeg er fortapt!

Takk

Svar #1

App.component blir gjengitt og det er beholderen for alle andre komponenter. Så ikke inkludér det i ruting,

Så det du må gjøre er å kopiere koden din fra App.component og legge den koden til en ny komponent (kalt home.component)

Konfigurer deretter ruting som følger.

RouterModule.forRoot([
  { path: '', component: HomeComponent},
  { path: 'admin', component: AdminComponent }

])

app.component.html

<router-outlet></router-outlet>

home.component.html

...My custom html

Svar #2

Basert på rutene dine, prøv å endre routerModule til:

RouterModule.forRoot([
      { path: '', redirectTo: '/admin', pathMatch: 'full' },
      { path: 'admin', component: AdminComponent }
    ])

Forresten, når du oppretter en forRoot-ruter, leter Angular etter en <router-outlet>-velger i din bootstrap-komponent fra applikasjonen din (vanligvis app.component.html). Det er ikke nødvendig å spesifisere app.component med forRoot-konfigurasjon!

Relaterte artikler