Angular2-“路由器插座”不是已知元件

我创造了有深层子路径的路线。我将 <router-outlet>添加到 管理组件组件中，并将其封装到 NgModule 中。但刷新页面后，我得到了这个错误:

'router-outlet' is not a known element

可能是因为我忘了向 管理模块导入某个模块

请帮帮我，谢谢。

应用程序路由

export const routes: Routes = [
{
path: '',
component: AppComponent,
children: [
{
path: '',
component: LoginComponent
},
{
path: 'admin',
component: AdminComponent
},
{
path: 'user',
component: UserComponent
},
{
path: 'there',
component: ThereComponent
}
]
}
]

应用程序模块

@NgModule({
imports: [
BrowserModule,
AppRoutes,
FormsModule,
ReactiveFormsModule,
HttpModule,
RouterModule,
TranslateModule.forRoot({
provide: TranslateLoader,
useFactory: (http: Http) => {
return new TranslateStaticLoader(http, './src/assets/i18n', '.json')
},
deps: [Http]
}),
UserComponentModule,
AdminComponentModule,
LoginComponentModule,
ThereComponentModule,
DashboardComponentModule
],
declarations: [
AppComponent
],
providers: [
FormBuilder
],
bootstrap: [AppComponent]
})

和 < em > admin.module.ts

//  admin.component.ts
import {Component} from "@angular/core";


@Component({
selector: 'admin',
template: "<router-outlet></router-outlet>",
})


export class AdminComponent {
constructor() {


}
}


//  admin.module.ts
const ADMIN_DECLARATION = [
AdminComponent
];


@NgModule({
imports: [
BrowserModule,
TranslateModule,
FormsModule,
ReactiveFormsModule
],
declarations: [
ADMIN_DECLARATION
],
exports: [
ADMIN_DECLARATION
],
providers: [
TranslateService,
FormBuilder
]
})


export class AdminComponentModule {


}
92151 次浏览
小开
最佳答案

AdminComponent是 AdminComponentModule的一部分，您没有在 AdminComponentModule模块内导入 RouterModule:

//  admin.component.ts
import {Component} from "@angular/core";


@Component({
selector: 'admin',
template: "<router-outlet></router-outlet>",
})


export class AdminComponent {
constructor() {


}
}


//  admin.module.ts
const ADMIN_DECLARATION = [
AdminComponent
];


@NgModule({
imports: [
BrowserModule,
TranslateModule,
RouterModule,
FormsModule,
ReactiveFormsModule
],
declarations: [
ADMIN_DECLARATION
],
exports: [
ADMIN_DECLARATION
],
providers: [
TranslateService,
FormBuilder
]
})


export class AdminComponentModule {


}
小开

添加这个代码

import { provideRoutes} from '@angular/router';

到你的 app.module.ts

对我有用。

小开

您没有导出 RouterModule。

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
小开

在 app.module.ts 文件中

import { routing } from './app-routing.module';


//and then write within imports
@NgModule({
declarations: [
AppComponent,
NavbarComponent
],
imports: [
BrowserModule,
**routing**,
EmployeeModule
],
小开

这对我有用:

在 AppModule 中添加模式 [NO_ERRORS_SCHEMA]。

import { NO_ERRORS_SCHEMA } from '@angular/core';


@NgModule({
schemas : [NO_ERRORS_SCHEMA]
})
小开

应用程序模块

import { MyRoutingModule } from './MyRoutingModulePath';


@NgModule({
imports: [
MyRoutingModule
])

提交答案