Question

我的项目文件夹结构如下

|-- app
     |-- home
       |-- home-page
           |--home-page.component.css
           |--home-page.component.html
           |--home-page.component.spec.ts
           |--home-page.component.ts
       |-- login
           |--home-page.component.css
           |--home-page.component.html
           |--home-page.component.spec.ts
           |--home-page.component.ts
       |-- user-profile
           |--user-profile.component.css
           |--user-profile.component.html
           |--user-profile.component.spec.ts
           |--user-profile.component.ts
     |-- home-routing.module.ts
     |-- home.module.spec.ts
     |-- home.module.ts
|-- app-routing.module.ts
|-- app.component.css
|-- app.component.html
|-- app.component.ts
|-- app.module.ts

我的home-routing.module.ts组成如下

export const HomeRoutingModule: Routes = [
    {
        path: "user-profile",
        children: [
            {
                path: "user-profile",
                component:UserProfileComponent ,
                data: {
                    title: "user-profile",
                    urls: [{ title: "user-profile", url: "user-profile" }]
                }
            }
        ]
    }
];

和app-routing.module.ts如下所示

  { path: "home", component: LoginComponent },
  {
    path: "user-profile",
    component: HomePageComponent,
    children: [
      { path: "user-profile", loadChildren: "./home/home.module#HomeModule" },
    ]
  }

现在我正尝试在user-profile.components.html内渲染home-page.component.html，为此，我试图在home-page.component.ts中添加示例代码段，如下所示

<p>this is header</p>
<router-outlet></router-outlet>
<p>this is footer</p>

我的网址类似于localhost:4200/#/user-profile下方，但仅在输出下方显示，内容除外。

this is header

this is footer

我认为我错过了一些东西，即使我也无法弄清楚。谁能指出，这段代码出了什么问题。

编辑： home.module.ts

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

import { HomeRoutingModule } from './home-routing.module';
import { LoginComponent } from './login/login.component';
import { UserProfileComponent } from './user-profile/user-profile.component';
import { HomePageComponent } from './home-page/home-page.component';


@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(HomeRoutingModule),
    HomeRoutingModule,
  ],
  declarations: [UserProfileComponent, HomePageComponent]
})
export class HomeModule { }

Answer 1

问题出在路径/user-profile/user-profile的深层嵌套中。您只能使用该路径一次。

路由的修改版本

app-routing.module.ts

{ path: "home", component: LoginComponent },
{
    path: "user-profile",
    component: HomePageComponent,
    children: [
      { path: "", loadChildren: "./home/home.module#HomeModule" },
    ]
  }

home-routing.module.ts

export const HomeRoutingModule: Routes = [
    {

                path: "",
                component:UserProfileComponent ,
                data: {
                    title: "user-profile",
                    urls: [{ title: "user-profile", url: "user-profile" }]
                }
    }
];

编辑

从导入中删除HomeRoutingModule。

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(HomeRoutingModule)
  ],
  declarations: [UserProfileComponent, HomePageComponent]
})
export class HomeModule { }

Answer 2

只需将您的home-routing.module.ts更改为：

    export const HomeRoutingModule: Routes = [
{path : "" , component : HomePageComponent},
        {
                    path: "user-profile",
                    component:UserProfileComponent ,
                    data: {
                        title: "user-profile",
                        urls: [{ title: "user-profile", url: "user-profile" }]
                    }
                }
    ];

和app-routing.module.ts为：

  { path: "home", component: LoginComponent },
  { path: "", loadChildren: "./home/home.module#HomeModule"} ,

，您的路由器应该可以正常工作，即/将加载HomeComponent，而user-profile将加载UserProfileComponent。

编辑

您的home-routing.module,ts中有一个错误：

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

import { HomeRoutingModule } from './home-routing.module';
import { LoginComponent } from './login/login.component';
import { UserProfileComponent } from './user-profile/user-profile.component';
import { HomePageComponent } from './home-page/home-page.component';


@NgModule({
  imports: [
    CommonModule,
    HomeRoutingModule,
  ],
  declarations: [UserProfileComponent, HomePageComponent]
})
export class HomeModule { }

您从RouterModule.forChild(HomeRoutingModule)中删除了imports

Answer 3

app-routing.module.ts

    { path: "home", component: LoginComponent },
  {
    path: "user-profile",
    component: HomePageComponent,
    loadChildren: "./home/home.module#HomeModule"
  }

home-routing.module.ts

export const HomeRoutingModule: Routes = [
    {

                path: "",
                component:UserProfileComponent ,
                data: {
                    title: "user-profile",
                    urls: [{ title: "user-profile", url: "user-profile" }]
                }
    }
];

路由器插座未渲染

3 个答案:

路由的修改版本

编辑