将我的组件从app.component.html
更改为另一个other-component.html
app.component.html (这很有效)
<main>
<my-component></my-component>
<router-outlet></router-outlet>
</main>
但是,就这样......
app.component.html
<main>
<router-outlet></router-outlet>
</main>
other.component.html (此操作失败)
<section>
Something here
and my-component here: <my-component></my-component>
</section>
得到错误:
- 如果'my-component'是Angular组件,请验证它是否是此模块的一部分。
- 如果'my-component'是Web组件,则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@ NgModule.schemas' 压制此消息。
醇>
我在路由器上使用“子组件延迟加载”。
应用-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: 'first-module',
loadChildren: 'app/first-module/first-module.module#FirstModule'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes, { enableTracing: false })],
exports: [RouterModule]
})
export class AppRoutingModule { }
这是我的app.module.ts
加载core.module
(我在{core.module btw中有my-component
}
app.module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { provideRoutes} from '@angular/router';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CoreModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class AppModule { }
core.module
import { NgModule, NO_ERRORS_SCHEMA, Optional, SkipSelf } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { CommonModule, DatePipe } from "@angular/common";
import { MyComponent} from './components/my-component/my-component.component';
@NgModule({
declarations: [
MyComponent
],
imports: [
HttpClientModule,
CommonModule
],
exports: [
MyComponent
],
providers: [
DatePipe
],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class CoreModule {
constructor (@Optional() @SkipSelf() parentModule: CoreModule) {
if (parentModule) {
throw new Error(
'CoreModule is already loaded. Import it in the AppModule only');
}
}
}
因此,应用程序在y转到url localhost:4200 / first-component时启动,它会加载主app.module,它会加载核心模块,最后一个加载my-component。但似乎只有将my-component放在app.component.html上才有效。
有人可以给我一些帮助吗?