Question

我是angular 9的新手，并且已经成功地将模板集成到了项目中，但是现在我需要添加新的组件（页面）来修改用户列表，但是我真的不知道如何添加它，我使用了ng gc user_liste，并在header.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

我认为您必须在dashboard-router.ts中添加带有路由的组件

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

Answer 2

好的，现在我可以通过创建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)
    }
  ]
},

如何使用角度9从一页路由到另一页

2 个答案: