как открыть суб суб маршруты с angular?

Question

Я пытался открыть свои подкаталоги angular, но URL-адрес изменился, но сама страница не отображается. Моя страница маршрутизации

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import {TranslateModule} from '@ngx-translate/core';
import { AdminPage } from './admin/admin.page';
import { AdminDashboardPage } from './adminComponents/admin-dashboard/admin-dashboard.page';
import {AdminPermissionPage} from './adminComponents/admin-permission/admin-permission.page';
import {SchoolListPage} from './components/school-list/school-list.page';
import {StudentListPage} from './components/student-list/student-list.page';
import {TeacherListPage} from './components/teacher-list/teacher-list.page';
import {CoursesListPage} from './components/courses-list/courses-list.page';
import {LoginPage} from './components/login/login.page';
import {REditorPage} from './r-editor/r-editor.page';
import {RSchoolPage} from './r-school/r-school.page';
import {RSchoolStaffPage} from './r-school-staff/r-school-staff.page';
import {RTeacherPage} from './r-teacher/r-teacher.page';
import {RStudentsPage} from './r-students/r-students.page';
import {AddCoursePage} from './r-teacher-components/add-course/add-course.page'
import {AboutPage} from './components/about/about.page';
import {SchoolsPage} from './components/schools/schools.page';
import {ContactPage} from './components/contact/contact.page';
import {RegisterPage} from './components/register/register.page';
import {StudentPageCourseListPage} from './components/student-page-course-list/student-page-course-list.page';


import { AdminGuard } from './admin.guard';
const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  {
    path: 'login',
    component: LoginPage,
    pathMatch:"full"
  },
  {
    path:'admin',
    redirectTo:'admin/dashboard',
    pathMatch:'full'
  },
  {
    path:'editor',
    redirectTo:'editor/dashboard',
    pathMatch:'full'
  },
  {
    path: 'admin',
    component: AdminPage,
    //canActivate: [AdminGuard],
    children: [
      { path: 'dashboard', component: AdminDashboardPage,pathMatch:"full" },
      {
        path: 'school-list',
      component: SchoolListPage,
      pathMatch:"full"
      },
      {
        path: 'student-list',
        component: StudentListPage,
        pathMatch:"full"
      },
      {
        path: 'teacher-list',
        component: TeacherListPage,
        pathMatch:"full"
      },
      {
        path: 'courses-list',
        component: CoursesListPage,
        pathMatch:"full"
      },
      {
        path: 'permissions',
        component: AdminPermissionPage,
        pathMatch:"full"
      }
    ]
  },
  {
    path: 'editor',
    component:REditorPage,
    children: [
      { path: 'dashboard', component: AdminDashboardPage,pathMatch:"full" },
      {
        path: 'school-list',
      component: SchoolListPage,
      pathMatch:"full"
      },
      {
        path: 'student-list',
        component: StudentListPage,
        pathMatch:"full"
      },
      {
        path: 'teacher-list',
        component: TeacherListPage,
        pathMatch:"full"
      },
      {
        path: 'courses-list',
        component: CoursesListPage,
        pathMatch:"full"
      },
      {
        path: 'permissions',
        component: AdminPermissionPage,
        pathMatch:"full"
      }
    ]
  },
  {
    path: 'rschool',
    component:RSchoolPage,
    children: [
      { path: 'dashboard', component: AdminDashboardPage,pathMatch:"full" },
      {
        path: 'school-list',
      component: SchoolListPage,
      pathMatch:"full"
      },
      {
        path: 'student-list',
        component: StudentListPage,
        pathMatch:"full"
      },
      {
        path: 'teacher-list',
        component: TeacherListPage,
        pathMatch:"full"
      },
      {
        path: 'courses-list',
        component: CoursesListPage,
        pathMatch:"full"
      },
      {
        path: 'permissions',
        component: AdminPermissionPage,
        pathMatch:"full"
      }
    ]
  },
  {
    path: 'rschoolstaff',
    component:RSchoolStaffPage,
    children: [
      { path: 'dashboard', component: AdminDashboardPage,pathMatch:"full" },
      {
        path: 'school-list',
      component: SchoolListPage,
      pathMatch:"full"
      },
      {
        path: 'student-list',
        component: StudentListPage,
        pathMatch:"full"
      },
      {
        path: 'teacher-list',
        component: TeacherListPage,
        pathMatch:"full"
      },
      {
        path: 'courses-list',
        component: CoursesListPage,
        pathMatch:"full"
      },
      {
        path: 'permissions',
        component: AdminPermissionPage,
        pathMatch:"full"
      }
    ]
  },
  {
    path: 'rteacher',
  component: RTeacherPage,
  children: [
    { path: 'dashboard', component: AdminDashboardPage,pathMatch:"full" },
    {
      path: 'school-list',
    component: SchoolListPage,
    pathMatch:"full"
    },
    {
      path: 'student-list',
      component: StudentListPage,
      pathMatch:"full"
    },
    {
      path: 'teacher-list',
      component: TeacherListPage,
      pathMatch:"full"
    },
    {
      path: 'courses-list',
      component: CoursesListPage,
      children: [
        {
          path:"add-course",
          component:AddCoursePage
        }
      ]
    },
    {
      path: 'permissions',
      component: AdminPermissionPage,
      pathMatch:"full"
    }
  ]

  },
  {
    path: 'rstudents',
  component:RStudentsPage,
  children: [
    { path: 'dashboard', component: AdminDashboardPage,pathMatch:"full" },
    {
      path: 'school-list',
    component: SchoolListPage,
    pathMatch:"full"
    },
    {
      path: 'student-list',
      component: StudentListPage,
      pathMatch:"full"
    },
    {
      path: 'teacher-list',
      component: TeacherListPage,
      pathMatch:"full"
    },
    {
      path: 'courses-list',
      component: CoursesListPage,
      pathMatch:"full"
    },
    {
      path: 'permissions',
      component: AdminPermissionPage,
      pathMatch:"full"
    }
  ]

  },
  {
    path: 'add-school',
    loadChildren: () => import('./components/add-school/add-school.module').then( m => m.AddSchoolPageModule)
  },
  {
    path: 'register',
    component: RegisterPage,
    pathMatch:"full",
    children: [
      {
        path: 'student-page-course-list',
        component: StudentPageCourseListPage,
        pathMatch:"full"
      }
    ]
  },
  {
    path: 'about',
    component: AboutPage,
    pathMatch:"full"
  },
  {
    path: 'schools',
    component: SchoolsPage,
    pathMatch:"full"
  },
  {
    path: 'contact',
    component: ContactPage,
    pathMatch:"full"
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }),
    TranslateModule
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Для rteacher у меня есть дополнительный маршрут для списка курсов, а затем в списке курсов также есть дополнительный маршрут, называемый add-course. Я не могу получить доступ к странице add-course, используя мой ioni c навигация. Может ли angular разработчик показать мне, как получить доступ к под-маршруту?

course-list.page.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'app-courses-list',
  templateUrl: './courses-list.page.html',
  styleUrls: ['./courses-list.page.scss'],
})
export class CoursesListPage implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
  }

  toAddCourse(){
     this.router.navigate(['rteacher/courses-list/add-course'])
   }
}

course-list.page

<ion-header>
    <ion-buttons slot="start">
    <ion-menu-button></ion-menu-button>
    <ion-title>Courses list</ion-title>
    </ion-buttons>
</ion-header>

<ion-content>
  <div class="add_role" (click)="toAddCourse()">
    <div class="add">
      <p>Add a new Course</p>
      <ion-icon name="add"></ion-icon>
    </div>
  </div>
  <div class="courses">

  </div>
</ion-content>

Answer 1

В app.routing.ts добавьте свой маршрут компонента страницы добавления в раздел детей

  {
      path: 'courses-list',
      redirectTo: 'CoursesListPage',  //here write your courses list page component name
      pathMatch: 'full',
  },
   children: [
      {
      path: 'add-coursePage',
      component: AddCoursePage,     //here write your add-coursePage component name
      data: {
          title: 'AddCoursePage'
      }
  },