<router-outlet> 在 Angular 9 中不起作用

Question

我遇到了 angular 9 的一些问题，无法正常工作。 我的文件是这样的：

routes.ts

import { LayoutComponent } from './../layout/layout.component';
import { Routes } from '@angular/router';

export const routes: Routes = [
  { path: '', component: LayoutComponent, children: [
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then((m) => m.DashboardModule)},
    { path: 'table', loadChildren: () => import('./table/table.module').then((m) => m.TableModule)},
    { path: 'form', loadChildren: () => import('./form/form.module').then((m) => m.FormModule)}
  ]}
];

app-routes.moudule.ts

import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { routes } from './routes';

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

app.module.ts

import { LayoutModule } from './layout/layout.module';
import { AppRoutesModule } from './routes/app-routes.module';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

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

layout.component.html

<p>layout works! works</p>
<router-outlet></router-outlet>

layout.module.ts

import { LayoutComponent } from './layout.component';
import { NgModule } from '@angular/core';

@NgModule({
  declarations: [LayoutComponent],
  exports: [LayoutComponent]
})
export class LayoutModule {}

当我运行 ng serve 时，它​​总是提示：

块引用

src/app/layout/layout.component.html:2:1 中的错误 - 错误 NG8001：'router-outlet' 不是已知元素： 1.如果'router-outlet'是一个Angular组件，那么验证它是这个模块的一部分。 2. 如果“router-outlet”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。

2 <router-outlet></router-outlet>
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/layout/layout.component.ts:5:16
    5   templateUrl: './layout.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component LayoutComponent.

块引用

有人可以帮我弄清楚吗？

另外，在 layout.component.html 文件中，不显示子内容，例如表单组件、表格组件或仪表板组件。

有什么建议吗？

Answer 1

让我们开始吧。

您有以下模块：

• 应用模块
• 布局模块
• AppsRouteModule（只是一个路由模块）

在 Angular 中，当您创建一个模块时，该模块只能访问您在其中声明的组件、指令等。

AppModule

此 AppModule 可以访问您在其中声明的任何组件或指令，或您从其中一个模块中导出的任何其他元素（如 LayoutModule）

import { LayoutModule } from './layout/layout.module';
import { AppRoutesModule } from './routes/app-routes.module';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

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

布局模块

然后我们就有了 LayoutModule，它里面只声明了 LayoutComponent。

import { LayoutComponent } from './layout.component';
import { NgModule } from '@angular/core';

@NgModule({
  declarations: [LayoutComponent],
  exports: [LayoutComponent]
})
export class LayoutModule {}

通过此设置，您从 LayoutModule 导出的所有内容都可以在 AppModule 中使用，但 LayoutModule 无法访问 AppModule 中声明的内容，它是AppModule，如果你愿意的话。

由于路由模块只在 AppModule 中声明，LayoutModule 不知道，Angular 根本不会处理这样的模块，如果你想在 LayoutModule 中使用路由，将它导入到那个模块中，它您想在两者中都使用路由模块（我认为这不是一件好事），您应该创建一个 SharedModule，在其中导入和导出路由模块，然后在 App 和 Layout 模块中导入 SharedModule。

Answer 2

你必须导入 RouterModule

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

@NgModule({
  imports: [RouterModule.forChild()]
})
export class LayoutModule {}

更好的方法

layout.component.html

<p>layout works! works</p>
<ng-content></ng-content>

app.component.html

<app-layout>
  <router-outlet></router-outlet>
</app-layout>