我在一个项目上工作,我需要使用一个子标签<router-outlet>级加载标签上的不同的子组件,something like this

因此,我在我的user-component中创建了一个user-outlet来加载特定的用户图片、待办事项等.

<router-outlet name="user-outlet"></router-outlet>
const USER_ROUTES: Routes = [
  {
    path: '',
    component: UserComponent,
    children: [
      {
        path: '',
        component: UserDefaultContentComponent,
        outlet: 'user-outlet',
      },
      { path: 'todo', component: UserTodoComponent, outlet: 'user-outlet' },      
      { path: 'pics', component: UserPicsComponent, outlet: 'user-outlet' },      
    ],
  },
];

export const userRouting = RouterModule.forChild(USER_ROUTES);

但是ANGLING没有在这个子router-outlet 上加载内容,而是重定向到404,这里是重现该问题的堆栈闪电战.

https://stackblitz.com/edit/angular-kvv1g4?file=src%2Fapp%2Fapp.component.ts

以及重定向到404的示例性路由

/user/todo
/user/pics

推荐答案

当我们想要在同一页面上有多个router-outlet 时,我们经常会给一个router-outlet 添加一个名称.请看一下official documentation号.在您的例子中,情况似乎并非如此.删除所有级别的User-Outler应该可以解决您的问题.your stackblitz example updated.

Angular相关问答推荐

Angular:浏览器中未显示一些Google Content图标

如何在自定义验证器中获取所有表单控件(字段组动态创建)

图像未显示在视图屏幕上-Angular 投影

material 对话框中没有合适的注塑

[NullInjectorError]:R3InjectorError(Standalone[_AppComponent])[]:NullInjectorError:No provider for _HttpClient

如何在独立应用程序中全局禁用基于媒体查询的Angular 动画?

NG-Zorro Datepicker 手动输入掩码不起作用

Angular 为什么延迟加载返回空路径?

带有Angular 中断的进度条

Angular 14 类型表单 - 数字控件的初始值

如何在Cypress 测试中切换 Angular 选项卡

找不到模块'webpack'

如何添加/设置环境 Angular 6 angular.json 文件

为什么我们需要`ngDoCheck`

Angularmaterial步进器:禁用标题导航

未绑定断点 - VS Code | Chrome | Angular

如何使用依赖注入扩展组件?

Angular 2从assets文件夹加载CSS背景图像

Angular CLI 输出 - 如何分析Bundle 文件

No provider for Router?