Angular 11 不从组件加载 HTML

Question

我有个问题。 我的 angular 应用程序中有 2 个路由器插座。 第一个在 app.component.html 中，为普通用户和网站访问者加载。 路由器工作正常，其中的所有组件都已完美加载

<ng-container *ngIf="!isAdmin">
 <app-header></app-header>
 <router-outlet></router-outlet> 
 <app-footer></app-footer>
</ng-container>

这是appRoutingModule，它是forRoot

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { CatalogComponent } from './movies/catalog/catalog.component';
import { NotFoundComponent } from './not-found/not-found.component';
import { AuthActivate } from './core/guards/auth.activate';
import { AboutComponent } from './about/about.component';
import { ReqComponent } from './req/req.component';



const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: '/home'
  },
  {
    path: 'home',
    component: HomeComponent,
  },
  {
    path: 'about',
    component: AboutComponent
  },
  {
    path: 'catalog',
    component: CatalogComponent,
    canActivate: [AuthActivate],
    data: {
      authenticationRequired: true,
      authenticationFailureRedirectUrl: '/',
    }
  },
{
  path: 'req',
  component: ReqComponent,
  canActivate: [AuthActivate],
  data: {
    authenticationRequired: true,
    authenticationFailureRedirectUrl: '/',
  }
},

// all others
  {
    path: '**',
    component: NotFoundComponent
  }
];

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

我有第二个仅供管理员用户使用的路由出口。 如果登录的用户是管理员，则显示仪表板。 它加载完全不同的 css、header 和页脚。 插座有自己的路由，可以正常工作。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthActivate } from '../core/guards/auth.activate';
import { UserslistComponent } from './userslist/userslist.component';
const routes: Routes = [

  {
    path: 'admin-home',
    component: UserslistComponent,
    canActivate: [AuthActivate],
    outlet: 'admin',
    data: {
      authenticationRequired: true,
      admin: true,
      authenticationFailureRedirectUrl: '/about',
    }
  },
  {
    path: 'userlist',
    component: UserslistComponent,
    canActivate: [AuthActivate],
    outlet: 'admin',
    data: {
      authenticationRequired: true,
      admin: true,
      authenticationFailureRedirectUrl: '/about',
    }
  },

];


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

app.component.html 中的出口

<ng-container *ngIf="isAdmin">
 <app-adminheader></app-adminheader>
 <router-outlet name="admin"></router-outlet> 
 <app-adminfooter></app-adminfooter>
</ng-container>

所以这两个出口都适合不同的用户。 Header 和取决于用户权限的页脚已正确加载和显示。

但是，如果我想在 header 和页脚之间的页面正文中呈现 HTML，例如作为根显示，在“用户列表”下加载 UserListComponent。 未显示此 userListComponent 的 html 我尝试使用 5 个新创建的组件。

对此有什么解释吗？ 感谢您的时间：）

Answer 1

如果在 DOM 中检查，我们会看到路由器出口已显示，但它是空的

schreenshot 显示空的 dom，空白，组件 userslistcomponent 应该呈现在左侧 - adminheadercomponent 的一部分，正确显示

Answer 2

您如何访问“管理”路线？ 通过该实现，应显示正确管理组件的 URL 应如下所示：

'/home/(admin:admin-home)'

你在这样做吗？

我不确定你是否正确地理解了次要路由:) - 次要路由（所以带有outlet的那些）有点像主路由的孩子 - 我的意思是我们一次可以使用两个路由器插座.

在您的情况下，只有两种不同的路由树 - 一种用于普通用户，一种用于管理员。 因此你不应该使用二级路由，而是设计这样的架构：

<ng-container *ngIf="admin">
  <app-admin-header></app-admin-header>
  <router-outlet></router-outlet>
  <app-admin-footer></app-admin-footer>
</ng-container> 

<ng-container *ngIf="!admin">
  <app-header></app-header>
  <router-outlet></router-outlet>
  <app-footer></app-footer>
</ng-container> 

和路线配置：

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
  },
  {
    path: 'admin-home',
    component: AdminHomeComponent,
  },
  ...
]

然后，您可以通过使用/admin-home/解析路由/home/和 admin home 来访问常规 home。 这两条路线处于同一水平 - 将它们视为通往 go 的两条独立途径:)

Answer 3

感谢你的回答

您好回答您的问题，我确实访问了这样的管理路由

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
  },
  {
    path: 'admin-home',
    component: AdminHomeComponent,
    outlet: "admin"
  },
  ...
] 

. 使用出口：“管理员”我进入管理路由器出口。 我为不同的路径使用不同的模块。 例如，对于用户我有这个路由模块

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthActivate } from '../core/guards/auth.activate';
import { LoginComponent } from './login/login.component';
import { ProfileComponent } from './profile/profile.component';
import { RegisterComponent } from './register/register.component';
import { EditProfileComponent } from './edit-profile/edit-profile.component';

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
    canActivate: [AuthActivate],
    data: {
      authenticationRequired: false,
      authenticationFailureRedirectUrl: '/',
    }
  },
  {
    path: 'register',
    component: RegisterComponent,
    canActivate: [AuthActivate],
    data: {
      authenticationRequired: false,
      authenticationFailureRedirectUrl: '/',
    }
  },
  {
    path: 'profile',
    component: ProfileComponent,
    canActivate: [AuthActivate],
    data: {
      authenticationRequired: true,
      authenticationFailureRedirectUrl: '/login',
    }
  },
  {
    path: 'edit-profile',
    component: EditProfileComponent,
    canActivate: [AuthActivate],
    data: {
      authenticationRequired: true,
      authenticationFailureRedirectUrl: '/',
    }
  },

];

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

意思是我确实在这个模块中分离了特定于用户的路由。 这行得通。 我确实将管理员的路由以及用户和任务的路由分开，我决定只为管理员使用另一个出口，这是当我意识到 html 不再为组件呈现时，由这个新出口代表。 我用 user-routing.module.ts guest-routing.module.ts 渲染的组件

工作正常，但他们从主要出口获得路线

正如您所建议的，我也会尝试使用管理路由的主要出口，谢谢:)