Question

我目前正在学习使用Angular 4 with angular-cli来构建一个Web前端（好吧）。

当我创建应用程序并开始使用我自己的数据模型模仿Heroes教程时，我创建了一些组件，但它们 - 至少是在主页上显示的组件 - 都放在根App组件中。当我ng generate component时，它被放置在App中，这让我觉得这是有意的方式。

如果是这样，我应该如何在没有应用程序根组件关闭的情况下路由应用程序？我不知道组件如何与路线一起工作？

我不希望这个问题过于宽泛，所以我将尝试着重于这一点：如何构建改变组件子组件的路由，而不是主组件本身？

Answer 1

实际路由与应用程序结构中组件文件的放置没有任何关系。它全部是在RouterModule的{{1}}和forRoot方法中定义和配置的。再次检查文档here和here。

话虽如此，不要随意创建并将组件和模块放入结构中。首先，始终检查是否可以将任何给定批次的组件和服务包装在模块内。如果是这样，将它们放在一起并将它们包装在模块中，因为这确实有助于维护和扩展代码。第二，检查关于应用程序结构的angular's own style-guide。

Answer 2

如何构建更改组件的路径（比如组件A）子组件（组件b和C），但不是主要组件（比方说 main.component.ts）本身？

您将<router-outlet>放入组件（A）中，并将组件B和C定义为A的子路由

Answer 3

使用CLI添加模块时，使用--routing标记，您将向您的功能模块添加路由模块：ng g module feature/Example --routing您将导入ExampleModule 。将要素ExampleModule导入AppModule时，路线将添加到应用程序中。

然后，您需要做的就是在ExampleRoutingModule中声明您的组件路线，以便在routerLink，router.navigate等应用程序中使用

最后，通过将<router-outlet>添加到路径组件视图，您可以使用路径中的children键提供子组件视图。

下面的代码示例包括功能模块路由以及子组件路由。它非常冗长，所以我在StackBlitz上做了一个工作示例，你可以看到它在视觉和实现方面是如何工作的。

包含路线的示例模块

import { NgModule } from '@angular/core';

import { DashboardRoutingModule } from './dashboard-routing.module';

@NgModule({
  imports: [
    ExampleRoutingModule
  ]
  // ... with whatever component declarations
})
export class ExampleModule { }

应用模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// Root
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { CoreModule } from './core/core.module';
import { SharedModule } from './shared/shared.module';

import { ExampleModule } from './dashboard/dashboard.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CoreModule,
    SharedModule,
    ExampleModule, // Adds your ExampleModule with routes
    AppRoutingModule // WARNING: MUST be the last routing module imported!!!
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

路由模块示例

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

import { ExampleParentComponent } from './example-parent/example-parent.component';
import { ExampleChildComponent } from './example-child/example-child.component';

const dashboardRoutes: Routes = [
  {
    path: 'example',
    component: ExampleParentComponent,
    children: [
      {
        path: '', // Equivalent to `/` and alias for `component` to catch provide a default route for `/example` so ParentComponent doesn't display without routed child content
        component: ExampleChildComponent,
        data: { title: 'Example' }
      },
      {
        path: 'component',
        component: ExampleChildComponent,
        data: { title: 'Example' }
      },
      // ...
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(exampleRoutes)],
  exports: [RouterModule]
})
export class ExampleRoutingModule { }

应用组件模板

<div class="app-component">

  <!-- 
  Will display the example parent component for a route of
  `/example/component`
  -->
  <router-outlet></router-outlet>

</div>

示例父组件模板

应用您需要示例父组件的任何标记或样式来包含＆＃34;包装＆＃34;路由的子组件内容：

<div class="parent-component special-wrapper-styles">

  <!-- 
  Will display the example child component content for a route of
  `/example/component`
  -->
  <router-outlet></router-outlet>

</div>

我的所有组件都应该放在根App组件中吗？

3 个答案: