angular - 评论不显示
问题描述
我正在使用角度延迟加载,无法在主要组件中显示 child1、child2 和 child3。
这是供您参考的代码
我要做的是在共享模块中的主要组件中显示 child1、child2 和 child3
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF, LocationStrategy, PathLocationStrategy } from '@angular/common';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeModule } from './home/home.module';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
HomeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
--- app.component.html
<button routerLink="/home">home</button>
<button routerLink="/login">login</button>
<router-outlet></router-outlet>
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { SharedModule } from './shared/shared.module';
const routes: Routes = [
{ path: '', component: HomeComponent, pathMatch: 'full'},
{ path: 'login', component: LoginComponent},
{ path: 'home', component: HomeComponent},
{ path: '**', component: HomeComponent }
];
@NgModule({
imports: [SharedModule, RouterModule.forRoot(routes, {useHash: false})],
exports: [RouterModule],
})
export class AppRoutingModule {}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeRoutingModule } from './home-routing.module';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { SharedModule } from '../shared/shared.module';
import { HomeComponent } from './home.component';
@NgModule({
declarations: [HomeComponent],
imports: [
BrowserModule,
CommonModule,
BrowserAnimationsModule,
HttpClientModule,
HomeRoutingModule,
SharedModule
],
exports: [HomeComponent]
})
export class HomeModule { }
<h1>I am home</h1>
<a routerLink="/cust/features/child1">child1</a>
<a routerLink="/cust/features/child2">child2</a>
<a routerLink="/cust/features/child3">child3</a>
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MainComponent } from '../shared/main/main.component';
const homeRoutes: Routes = [
{
path: '', component: MainComponent,
children: [
{ path: '', redirectTo: 'cust', pathMatch: 'full'},
{ path: 'cust',
loadChildren: () => import('../features/features.module').then(m => m.FeaturesModule)},
]
}
];
@NgModule({
imports: [RouterModule.forChild(homeRoutes)],
exports: [RouterModule]
})
export class HomeRoutingModule { }
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'features' },
{ path: 'features', loadChildren: () =>
import('./childrens/childrens.module').then((m) => m.ChildrensModule)
},
];
@NgModule({
declarations: [],
imports: [
CommonModule,
RouterModule.forChild(routes)
]
})
export class FeaturesModule { }
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { Child1Component } from './child1/child1.component';
import { Child2Component } from './child2/child2.component';
import { Child3Component } from './child3/child3.component';
const routes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'child1' },
{path: 'child1', component: Child1Component},
{path: 'child2', component: Child2Component},
{path: 'child3', component: Child3Component},
{path: '**', component: Child1Component},
];
@NgModule({
declarations: [Child1Component, Child2Component, Child3Component],
imports: [
CommonModule,
RouterModule.forChild(routes)
]
})
export class ChildrensModule { }
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MainComponent } from './main/main.component';
import { RouterModule } from '@angular/router';
@NgModule({
declarations: [MainComponent],
imports: [
CommonModule,
RouterModule
],
exports: [MainComponent]
})
export class SharedModule { }
—main.html
<router-outlet></router-outlet>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-main',
templateUrl: './main.component.html'
})
export class MainComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
--child1.html
<h1>i am child 1</h1>
--child2.html
<h1>i am child 2</h1>
--child3.html
<h1>i am child 3</h1>
我正在努力修复它。任何解决方案
提前致谢
解决方案
移除{ path: '**', component: HomeComponent }
并AppRoutingModule
看到魔法发生。
当您定义path: '**'
它时,它意味着除了我之前定义的所有路径!
通过单击,您正在更改tochildComponents
的路径和触发器,然后它会重新渲染 home 组件,您会陷入循环。home
cust
AppRouting
path: **
推荐阅读
- javascript - Node Soap - http 获取请求返回 index.html
- netbeans - 为什么我的 NetBeans 11.2 IDE 在启动时冻结,我该如何解决?
- android - 如何使用android上的firebase数据库将帖子移动到特定位置
- python - 在一组列上使用应用时的 Pandas 边界条件问题
- javascript - Jquery数据表如何在特定条件下在一个单元格中显示两列
- bash - 如何将布尔测试的结果放入变量中?
- java - 关于 RxJava 和 PublishSubject 的初学者问题
- excel - 优化宏
- python - 如何用另一个字典的键替换字典的键?
- python-3.x - 如何在 python toga 中添加带有图标的按钮