子模块的Angular 5路由无法正常工作

Question

子模块的Angular 5路由无法正常工作

Wai*_*ein 0 typescript angular-routing angular angular-router

我正在使用Angular 5开发Web应用程序.我是Angular with Typescript的新手.现在我正在为我的应用程序模块配置路由.但它不起作用并抛出错误.

这是我的index.html档案

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
  <router-outlet></router-outlet>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

我在app-routing.module.tsapp文件夹下创建了一个文件.

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { AppComponent } from './app.component';


    const routes: Routes = [ 
        { path: '', loadChildren: './web/web.module#WebModule' },
    ];

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


Import that routing class in the app.module.ts file

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Route } from '@angular/router';
import { AppRoutingModule } from './app-routing.module'

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


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

Run Code Online (Sandbox Code Playgroud)

然后创建另一个模块, web/web.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home/home.component';
import { WebRoutingModule  } from './web-routing.module';

@NgModule({
  imports: [
    CommonModule,
    WebRoutingModule
  ],
  declarations: [HomeComponent]
})
export class WebModule { }

Run Code Online (Sandbox Code Playgroud)

这是我的 web-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
    { path: '', component: HomeComponent }
];

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

Run Code Online (Sandbox Code Playgroud)

如你所见,我正在渲染HomeComponent.我创建了主组件用户web/home/文件夹.

根据我的代码,如果我像这样访问我的网站localhost:4200,它应该在index.html文件中的路由器输出中呈现主组件HTML .现在它不会渲染主组件HTML.它正在渲染index.html但没有home,组件在router-outlet中被替换.那么,我的代码有什么问题,我该如何解决？

Answer 1

SCR*_*ATK 8

<router-outlet></router-outlet>必须在app-homeindex.html文件中不在标记中才能工作

我刚刚在我的一个项目中设置了路由.

我app.component.ts看起来像这样

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
}

Run Code Online (Sandbox Code Playgroud)

我app.component.html看起来像这样

<router-outlet></router-outlet>

Run Code Online (Sandbox Code Playgroud)

我app-routing.module.ts看起来像这样

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// Layouts
import { MasterComponent } from './components/layouts/master/master.component';
// Main Pages
import { HomeComponent } from './components/pages/home/home.component';
import { PageNotFoundComponent } from './components/pages/page-not-found/page-not-found.component';

const routes: Routes = [
  { path: '', component: MasterComponent, children: [
    { path: '', component: HomeComponent },
  ] },
  { path: '**', component: PageNotFoundComponent },
];

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

Run Code Online (Sandbox Code Playgroud)

我的index.html文件也是这样的

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Office</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，8 月前
查看次数：	2919 次
最近记录：	7 年，4 月前