我在使用angular时遇到问题,这是我的项目结构(从app文件夹开始,请查看super-admin文件夹):
- Modules
---- home [+]
---- admin [+]
---- super-admin
-------- super-admin-routing.module.ts
-------- super-admin.module.ts
-------- (And html, scss, component file)
-------- pages
------------ auth [+]
------------ unauth [+]
------------ shared
---------------- shared.component.ts
---------------- (And html, scss file)
- cores [+]
- config [+]
- shared [+]
- strores [+]
- app-routing.module.ts
- app.module.ts
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
APP-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './modules/home/home.component';
import { AdminComponent } from './modules/admin/admin.component';
import { SuperAdminComponent } from './modules/super-admin/super-admin.component';
const routes: Routes = [
{
path: "",
component: HomeComponent
},
{
path: "home",
component: HomeComponent
},
{
path: "admin",
component: AdminComponent
},
{
path: "super-admin",
component: SuperAdminComponent,
loadChildren: './modules/super-admin/super-admin.module#SuperAdminModule'
},
{
path: "**",
component: HomeComponent
}
];
@NgModule({
declarations: [
HomeComponent,
AdminComponent,
SuperAdminComponent
],
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
超admin.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SuperAdminRoutingModule } from './super-admin-routing.module';
import { SharedComponent } from './pages/shared/shared.component';
@NgModule({
imports: [
CommonModule,
SuperAdminRoutingModule
],
declarations: [SharedComponent]
})
export class SuperAdminModule { }
超级管理员,routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './pages/login/login.component';
import { AuthComponent } from './pages/auth/auth.component';
const routes: Routes = [
{
path: "login",
component: LoginComponent
},
{
path: "",
component: AuthComponent,
loadChildren: "./pages/auth/auth.module#AuthModule"
},
{
path: "home",
component: AuthComponent,
loadChildren: "./pages/auth/auth.module#AuthModule"
},
{
path: "**",
component: AuthComponent
},
];
@NgModule({
declarations: [
LoginComponent,
AuthComponent
],
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class SuperAdminRoutingModule { }
超admin.component.html
<router-outlet></router-outlet>
<app-shared></app-shared>
最后是shared.component.ts文件
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-shared',
templateUrl: './shared.component.html',
styleUrls: ['./shared.component.scss']
})
export class SharedComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
请查看 super-admin.module.ts
文件,我在 super-admin.module.ts
中导入并声明了ShareComponent但我无法在 super-admin.component.html
中使用它,它说:
'app-shared'不是已知元素:如果'app-shared'是Angular组件,则验证它是否是此模块的一部分 . 如果'app-shared'是Web组件,则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@NgModule.schemas'以禁止显示此消息 .
我想我错过了什么?
我 ng s
它已经7次但它仍然不起作用
2 回答
由于你的super-admin.component属于app.module.ts,你需要从SuperAdminModule导出 SharedComponent 并在app.module.ts中导入 SuperAdminModule .
将super-admin.module更改为,
EDIT 如评论中所述,将其添加到app.routing.module.ts中
如果要声明模块中的任何组件并想要在其他模块中导入,请确保导出组件 .
super-admin.module as,
将组件导入其他模块 . 您必须确保将共享模块导入到使用导出组件的模块中 .
app-routing.module.ts