如何打开带角度的子路线？

Question

我一直在尝试打开我的有角子路由，但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的子路线。我无法使用离子导航访问该添加课程页面。角度开发人员可以告诉我如何访问子子路线吗？

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'
      }
  },