角度路由/导航无法正常工作：添加而不是替换组件

Question

之前已经问过这个问题，但没有一个答案对我有帮助。 我不能在角度上路由到不同的页面，相反，它只是在我的主页末尾添加所需组件的HTML。 这是我的代码：

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>

基于其他答案，问题可能是导入，我试图删除我在代码上使用的一些，如切换全屏，另一种可能性是可能存在我检查的控制台错误，并且没有问题。 谁能帮我？ 我搞不清楚了！

谢谢

Answer 1

App.component被渲染，它是所有其他组件的容器。 所以不要在路由中包含它，

因此，您需要做的是从App.component复制代码并将该代码添加到新组件（称为home.component ）

然后按如下方式配置路由。

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

])

app.component.html

<router-outlet></router-outlet>

home.component.html

...My custom html

Answer 2

根据您的路线，尝试将routerModule更改为：

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

顺便说一下，当你创建一个forRoot路由器时，Angular会在你的应用程序的bootstrap组件中查找<router-outlet>选择器（通常是app.component.html）。 没有必要使用forRoot配置指定您的app.component！

角度路由/导航无法正常工作：添加而不是替换组件

问题描述

2 个解决方案

解决方案1
7 已采纳 2018-08-01 16:43:54

解决方案2
3 2018-08-01 16:41:53

角度路由/导航无法正常工作：添加而不是替换组件

问题描述

2 个解决方案

解决方案1 7 已采纳 2018-08-01 16:43:54

解决方案2 3 2018-08-01 16:41:53

解决方案1
7 已采纳 2018-08-01 16:43:54

解决方案2
3 2018-08-01 16:41:53