Question

我是Angular2的新手，我正在尝试编辑和添加元素到我的数据库。为了编辑它们，我配置了elements/:id，以便转到数据库并拉回元素。你可以更新它，一切都好。然而，当我尝试添加时，理论上我可以有完全相同的形式，但我不会有id，因为后端分配了这个，所以我不知道是否真的知道我正在超载element.detail.component，我应该创建一个新的只是为了添加。

我还想过添加一条像elements/addnew这样的新路线，并优先考虑上面的路线，或者只是有一个全新路线。

更新：

到目前为止我的路由：

{ path: 'elements', component: ElementsComponent },
{ path: 'elements/:id', component: ElementDetailComponent },

如果我使用查询字符串的选项，我怎样才能区分新元素并根据上面的路由拉出所有元素？

Answer 1

使用相同的组件

可以通过多种方式实现此目的

第一种方法

使用Query字符串传递id的值，如果此查询字符串为空，则只需加载具有空值的表单并显示提交表单按钮

第二种方法

或者您可以简单地将id传递为0并扫描该值（如果为0）然后使用提交按钮加载空表单，否则显示用户的详细信息

第三种方法 使用路由

{path：'elements'，component：myComponent}，

{path：'elements /：id'，component：myComponent}，

并在myComponent中扫描param：id如果它存在则只加载用户数据，否则加载空表单

Answer 2

您可以使用 @ angular / router 中的 ActivatedRoute 来轻松检查您所处的模式（例如 new 或 edit 模式）

示例：

recipe-edit.component.ts

export class RecipeEditComponent implements OnInit {

id: number;
editMode: boolean = false;

constructor(private route: ActivatedRoute) { }

ngOnInit() {
    this.route.params.subscribe((params: Params) => {
        this.id = +params['id'];
        /**
         * Check if params has an ID property, 
         * if it has one, then this will actually be a string with the ID,
         * otherwise it will be undefined... By comparing it to null and checking if it is not null,
         * I am checking does it have the ID, because the ID will only be not undefined if we are 
         * in edit mode, because then an ID will be present.
         * 
         * So, if the ID indeed is undefined and therefore equal to null, this will return false because
         * I am checking the opposite and therefore, we are in new mode.
         */
        this.editMode = params['id'] != null;
    })
  }
}

app-routing.module.ts const appRoutes: Routes = [ { path: 'recipes', component: RecipesComponent, children: [ { path: '', component: RecipeStartComponent }, { path: 'new', component: RecipeEditComponent }, { path: ':id', component: RecipeDetailComponent }, { path: ':id/edit', component: RecipeEditComponent } ]} ];

用于编辑/添加的Angular2重用路由

2 个答案: