Question

我是Angular.io的初学者。

我为内容创建了多个组件，为标题创建了1个组件。

现在我需要创建路由，让用户可以点击按钮并转到目标页面。

我已经阅读了文档，但不幸的是，我无法理解。

有没有人有快速教程教我如何设置它？或者可以在这里分享步骤。不必是一个非常高级的教程，我只需要一些线索开始，然后我可以轻松地探索更多。

我已经尝试按照教程进行，但仍然无法正常工作：

app.module.ts中的

：

import { RouterModule, Routes } from '@angular/router';
import { RestaurantsComponent }  from './restaurants/restaurants.component';

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      {
        enableTracing: true, // <-- debugging purposes only
        preloadingStrategy: SelectivePreloadingStrategy,

      }
    )
  ],
  exports: [
    RouterModule
  ],

const appRoutes: Routes = [
  {
    path: 'restaurants',
    component: RestaurantsComponent,
  }
];

但是，当我访问http://localhost:4200/restaurant时，它没有显示餐厅组件。

Answer 1

在app-routing.module.ts中，您应该定义路线并导入路线所需的所有组件。

Here is an working example

第1步：创建app-routing.module.ts并定义路线

首先导入：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

现在为您的路线创建新数组const：

const appRoutes: Routes = [
  {
    path: '',
    redirectTo: 'homepage',
    pathMatch: 'full'
  },
  {
    path: 'homepage',
    component: HomeComponent
  }
];

使用此appRoutes进行模块配置：

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

将HomeComponent导入此文件。您应该导入将用于路由的所有组件。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
// after above imports
import { HomeComponent } from './your/path/home.component';

在AppRoutingModule。

中导入此AppModule

第2步：将router-outlet添加到app-component

在第一步中，我们为主页定义了一条路线。为了使其发挥作用，我们应该将<router-outlet></router-outlet>添加到我们的主应用程序组件中。

将以下代码添加到ypur app.component.html：

<router-outlet></router-outlet>

现在我们的基本路线应该有效。

使用子路由进行路由

如果您要创建一些带有子路线的路线，那么您可以按照以下步骤进行操作。

在appRoutes中修改你的AppRoutingModule：

示例：我们创建一个包含以下子页面的社区主页：

社区
- 论坛
- 文档
- 贡献

以下是我们的扩展appRoutes：

const appRoutes: Routes = [
  {
    path: '',
    redirectTo: 'homepage',
    pathMatch: 'full'
  },
  {
    path: 'homepage',
    component: HomeComponent
  },
  {
    path: 'community',
    component: CommunityComponent,
    children: [
      {
        path: 'forum',
        component: ForumComponent
      },
      {
        path: 'documentation',
        component: DocumentationComponent
      },
      {
        path: 'contribute',
        component: ContributeComponent
      }
    ]
  }
];

导入我们新页面的组件。

现在，您可以在应用中访问homepage和community路线。我们的community路线有一些孩子。要访问子路线，我们应将<router-outlet></router-outlet>添加到community.component.html。添加后，所有子路由都应该有效。

请记住：如果您有子路线，则应将路由器插座添加到父路线的模板中。

Here是angular.io页面的一个很好的教程。

Answer 2

你的道路是＆＃39;餐馆＆＃39;当你想要访问＆＃39; restaurant＆＃39; （没有＆＃39; s＆＃39;）

Angular - 需要设置路由和指南的指南导航

2 个答案: