使用 Stackblitz 向 Angular 项目添加路由答案

【问题标题】：Adding Routing to Angular Project using Stackblitz使用 Stackblitz 向 Angular 项目添加路由
【发布时间】：2021-09-26 10:21:51
【问题描述】：

我对 Angular 还很陌生，刚刚发现了 Stackblitz。我正在尝试实践路由的概念。有没有办法让终端出现在 Stackblitz 中以向项目添加路由？我知道您可以右键单击添加组件、服务、指令等内容，但是是否有用于路由的内容，或者您必须手动执行吗？

我尝试查找此内容，但所有搜索结果都链接到 stackblitz 项目。

【问题讨论】：

您必须手动添加。
您可以添加依赖项或更改 package.json 文件，但缺陷是它已经添加了 @angular/router

标签： angular angular-routing angular11 stackblitz

【解决方案1】：

Angular 中有不同类型的 routing，因此在不确切了解您想要了解的内容的情况下申请 stackblitz 是很困难的。

angular 路由器 本身非常强大，它允许传递数据、使用身份验证保护——无论是编写的还是预构建的，并且允许散列路由和页面片段路由，如果有人知道一点的话rxjs 动态路由从数据库构建，它提供状态和路由器本身的大量功能 - 它允许人们知道路由的 instance 何时开始和结束 - 它还允许我们获取路由树和参数，并直接将数据传递给路由器。

阅读它的最佳位置是 Angular.io https://angular.io/guide/routing-overview

还有一些很棒的课程可供学习，例如 https://angular-university.io

或者更通用的方法 https://fireship.io

当然可以在 coursera 或 edx 上找到有关 Angular 的免费内容。

【讨论】：

【解决方案2】：

您无法获取命令行，但您可以使用左下角的输入字段添加包。

您可以在您选择的合适的 IDE 中创建一个项目，然后在您想提出问题时将其放入堆栈闪电战中。要与其他人一起开展项目，您应该使用 GitHub 之类的存储库。

这是一个使用和不使用单独路由模块的基本路由示例。

在 app.module.ts 中：

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts 的基本示例：

const routes: Routes = [
  // A simple route to a component
  // Be aware that the order is important in angular
  // The first route that fits the format will be used
  { path: 'login', component: LoginComponent },
]

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

或者你的 app.module.ts 没有单独的路由模块：

const routes: Routes = [
  { path: 'login', component: LoginComponent }
]

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})

【讨论】：