Angular 4子组件懒加载失效问题求助

我来帮你搞定这个问题！你遇到的核心问题是路由匹配策略导致的优先级冲突——你的FeedbackModule里的空路径路由默认使用prefix匹配模式，这会让任何以/feedback开头的路径都优先匹配到这个路由，所以不管访问/feedback/prebilling还是其他子路径，都会加载FeedbackComponent。

下面给你两种针对性的解决方案：

方案一：严格匹配根路径（适合子组件独立渲染场景） #

给空路径路由添加pathMatch: 'full'配置，确保只有完全匹配/feedback时才加载FeedbackComponent，子路径会匹配对应的路由规则：

export const FEEDBACK_ROUTES: Routes = [
 // 关键修改：添加pathMatch: 'full'
 { path : '' , component : FeedbackComponent, pathMatch: 'full'},
 { path : 'prebilling' , component : PrebillingComponent},
 { path : 'postbilling/login' , component : PostbillingComponentLogin},
 { path : 'postbilling/rating/:mid/:return/:mtid' , component : PostbillingRatingComponent},
 { path : 'prebilling/rating/:mid/:type/:mtid/:mcnt/:mebid' , component : PrebillingRatingComponent},
 { path : 'prebilling/rating' , component : PrebillingRatingComponent},
 { path : 'postbilling/rating/:id' , component : PostbillingRatingComponent},
 { path : 'prebilling/rating/:mid/:type/:mtid' , component : PrebillingRatingComponent},
 { path : 'thanks/:id' , component : ThankYouComponent}
];

方案二：使用嵌套路由（适合子组件在父组件内渲染场景） #

如果FeedbackComponent是作为子路由的父容器（比如需要共享导航栏、页脚等布局），可以把所有子路由放到children数组中，同时确保FeedbackComponent的模板里包含<router-outlet></router-outlet>：

修改路由配置： #

export const FEEDBACK_ROUTES: Routes = [
 { 
   path : '' , 
   component : FeedbackComponent,
   children: [
     { path : 'prebilling' , component : PrebillingComponent},
     { path : 'postbilling/login' , component : PostbillingComponentLogin},
     { path : 'postbilling/rating/:mid/:return/:mtid' , component : PostbillingRatingComponent},
     { path : 'prebilling/rating/:mid/:type/:mtid/:mcnt/:mebid' , component : PrebillingRatingComponent},
     { path : 'prebilling/rating' , component : PrebillingRatingComponent},
     { path : 'postbilling/rating/:id' , component : PostbillingRatingComponent},
     { path : 'prebilling/rating/:mid/:type/:mtid' , component : PrebillingRatingComponent}
   ]
 },
 // thanks路由如果不需要在父组件内渲染，可以放在外面
 { path : 'thanks/:id' , component : ThankYouComponent}
];

在FeedbackComponent模板中添加路由出口： #

<!-- feedback.component.html -->
<!-- 这里可以放你的共享布局内容 -->
<h1>反馈系统</h1>
<!-- 子组件会渲染在这里 -->
<router-outlet></router-outlet>

补充说明 #

Angular路由是从上到下按顺序匹配的，所以如果有多个路由规则可能匹配同一个路径，更具体的路由应该放在前面（不过你当前的路由顺序没问题，主要问题是匹配策略）。

内容的提问来源于stack exchange，提问作者Jayesh Choudhary