как сделать маршрутизацию с одной страницы на другую с angular 9

Question

Я новичок в angular 9, и я успешно интегрировал шаблон в свой проект, но теперь мне нужно добавить новый компонент (страницу) для изменения списка пользователей, но я действительно не знаю, как это сделать. добавьте его, я использовал ng g c user_liste и использую в своем заголовке. html <a [routerLink]="['/app-user-liste']" [routerLinkActive]="['active']" class="waves-effect text_header"><i>User Liste</i></a>

, чтобы перейти к моему компоненту. Rq: Я обнаружил, что во всех папках компонентов, названных в 'component-route'.

user_list.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-user-liste',
  templateUrl: './user-liste.component.html',
  styleUrls: ['./user-liste.component.css']
})
export class UserListeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

app.router.ts:

export const routes: Routes = [{
  path: '',
  redirectTo: 'dashboard',
  pathMatch: 'full'
}, {
  path: '',
  component: LeftNavTemplateComponent,
  data: {
    title: 'Angular Admin Template'
  },
  children: [
    {
      path: 'dashboard',
      loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule),
      data: {
        title: 'Dashboard Page'
      },
    },
    {
      path: 'ui-elements',
      loadChildren: () => import('./ui-elements/ui-elements.module').then(m => m.UiElementsModule),
      data: {
        title: 'UI Elements'
      },
    },
    {
      path: 'forms',
      loadChildren: () => import('./forms/forms.module').then(m => m.FormsModule),
      data: {
        title: 'Form Page'
      },
    }
  ]
}, {
  path: 'tables',
  component: LeftNavTemplateComponent,
  data: {
    title: 'Tables'
  },
  children: [
    {
      path: '',
      loadChildren: () => import('./tables/tables.module').then(m => m.TablesModule)
    }
  ]
}, {
  path: 'userlist',
  component: LeftNavTemplateComponent,
  data: {
    title: 'userlist'
  },
  children: [
    {
      path: '',
      loadChildren: () => import('./tables/tables.module').then(m => m.TablesModule)
    }
  ]
},{
  path: '**',
  component: PageNotFoundComponent
}];

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

пример компонента-маршрута из другого компонента => dashboard-router.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule} from '@angular/router';
import { DashboardComponent } from '../dashboard.component';
import { DataTablesModule } from 'angular-datatables';
import { MatTableModule } from '@angular/material/table'  
import { MatCardModule } from '@angular/material/card';
import { MatDividerModule} from '@angular/material/divider';
import { MatSortModule} from '@angular/material/sort';
import { MatPaginator} from '@angular/material/paginator';

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    component: DashboardComponent,
    data: {
      title: 'Dashboard Component'
    }
  }
];
@NgModule({
    imports: [
      DataTablesModule,
      MatTableModule,
      MatCardModule,
      MatDividerModule,
      MatSortModule,
      RouterModule.forChild(routes)
    ],
    exports: [
      RouterModule, 
      DataTablesModule,
      MatTableModule,
      MatCardModule,
      MatDividerModule,
      MatSortModule
    ]
})
export class DashboardRoutingModule { }

Может кто-нибудь помочь мне направить компонент?

Answer 1

Хорошо, теперь я решил свою проблему, создав user-liste.module.ts и изменив путь на:

, {
  path: 'app-user-liste',
  component: UserListeComponent,
  data: {
    title: 'userlist'
  },
  children: [
    {
      path: '',
      loadChildren: () => import('./user-liste/user-liste.module').then(m => m.listeModule)
    }
  ]
},

Answer 2

Я думаю, что вы должны добавить свой компонент с маршрутом в dashboard-router.ts

 {
path: 'app-user-liste',
component: UserListeComponent,
  }