Angular 5，工作太多了

Question

在AngularJS工作了一段时间后，我才开始学习Angular 2/4/5。我发现Angular 5要复杂得多（对我而言）。这是发生了什么：

我想为用户创建一个CRUD。我做的是：

1. 创建了app-routing.module.ts
2. 为创建，查看，编辑，列表创建了4个组件
3. 在app-routing.module.ts中为4个以上的组件添加了4个导入

   import { UserCreateComponent } from 'app/components/user/create/create.component';
   import { UserEditComponent } from 'app/components/user/edit/edit.component';
   import { UserListComponent } from 'app/components/user/list/list.component';
   import { UserViewComponent } from 'app/components/user/view/view.component';

4. 在app-routing.module.ts中添加了4个路径：

   path: 'user/list',
   component: UserListComponent
   
   path: 'user/create',
   component: UserCreateComponent
   
   path: 'user/view/:id',
   component: UserViewComponent
   
   path: 'user/edit/:id',
   component: UserEditComponent

5. 在app.module.ts中再次导入4个以上组件：

   import { UserCreateComponent } from 'app/components/user/create/create.component';
   import { UserEditComponent } from 'app/components/user/edit/edit.component';
   import { UserListComponent } from 'app/components/user/list/list.component';
   import { UserViewComponent } from 'app/components/user/view/view.component';

6. 在声明部分添加了以下内容：

   UserEditComponent,
   UserListComponent,
   UserViewComponent,
   UserCreateComponent,

有没有更好的方法，我觉得它更复杂和重复。

Answer 1

您可以尝试延迟加载，仅在调用特定路由模块时加载组件。否则你的代码是正确的，也是在Angular中进行路由的基本方法。

Answer 2

这是在Angular2中做事的方式。 Angular应用程序只不过是一个组件树。在该树的根目录下，将在启动应用程序时呈现顶级组件。

因为组件是在父/子树中构造的，所以当每个Component呈现时，它会递归地呈现其子组件。

因此每个组件应该具有其组件类（.ts）和模板，并且也应该属于模块。最后，必须在使用之前导入组件。使用import的想法很像在Java中导入或者在Ruby中需要：我们从另一个模块中提取这些依赖项，并使这些依赖项可用于此文件。

Answer 3

@Ashutosh，有几种选择，例如您可以将组件减少到只有两个，UserListComponent和UserEditComponent（即使您只能有一个）。然后，在ngOnInit中检查ActivatedRoute或路由器

  constructor(private router: Router, private activatedRoute: ActivatedRoute)

  status:number
  ngOnInit()
  {
      if (this.router.url.indexOf("create")>=0)
      {
          status=0;
      }
      else
      {
          this.activatedRoute.paramMap.subscribe((params: ParamMap) =>
          { 
              console.log(params.get('id'))
              if (this.router.url.indexOf("view")>=0)
                 status=1;
              if (this.router.url.indexOf("edit")>=0)
                status=2;
          })
      }
  }