Question

我在Angular中遇到问题，无法在另一个对象（一个盘子）中获取对象（一种配料）的ID。我希望能够通过更新模块（见下文）来更新配料，例如名称，但我无法获取配料。例如，当我选择一道菜时，我在http://localhost:4200/dishes/3中。此处显示成分列表以及一个“编辑”和“删除”按钮。我希望能够单击“编辑”按钮并到达该特定成分的编辑页面。例如，我应该到达http://localhost:4200/dishes/3/ingredients/7。

但是，浏览器控制台出现以下错误，其中undefined应该是菜的ID（dishId）：

GET http://localhost:51115/api/dishes/undefined/ingredients/20 404 (Not Found)

我认为我需要在this.route.params.subscribe函数的参数中传递 dishId ，您可以在下面的更新模块代码示例中找到该函数，但是我不知道该怎么做。

预先感谢您的帮助！

更新模块：

export class IngredientUpdateComponent implements OnInit {
  public ingredientForm: FormGroup;
  private dishId: number;
  private ingredient: Ingredient;
  private ingredientId: number;
  private sub: Subscription;
  private originalIngredientForUpdate: IngredientForUpdate;

  constructor(private ingredientService: IngredientService,
    private route: ActivatedRoute,
    private router: Router,
    private formBuilder: FormBuilder) { }

ngOnInit() {
  this.ingredientForm = this.formBuilder.group({
    name: [''],
    pricePerUnit: ['']
  });

  // get route data (ingredientId)
  // here I think I need to add the dishId in some way the the params?
  this.sub = this.route.params.subscribe(
    params => {
        this.ingredientId = params['ingredientId'];

      // load ingredient
      this.ingredientService.getIngredientForDish(this.dishId, this.ingredientId)
        .subscribe(ingredient => {
          this.ingredient = ingredient;
          this.updateIngredientForm();
          this.originalIngredientForUpdate = this.ingredientForm.value;
        })
    }
  );
}

获取服务中的方法

getIngredientForDish(dishId: number, ingredientId: number): Observable<Ingredient> {
    return this.http.get<Ingredient>(`${this.apiUrl}/dishes/${dishId}/ingredients/${ingredientId}`)
}

路由模块：

const routes: Routes = [

  // redirect root to the dasbhoard route
  { path: '', redirectTo: 'dishes', pathMatch: 'full' },
  { path: 'dishes', component: DishesComponent },
  { path: 'about', component: AboutComponent },
  { path: 'dish-add', component: DishAddComponent },
  { path: 'dishes/:dishId', component: DishDetailComponent },
  { path: 'dish-update/:dishId', component: DishUpdateComponent },
  { path: 'dishes/:dishId/ingredient-add', component: IngredientAddComponent },
  { path: 'ingredient-update/:ingredientId', component: IngredientUpdateComponent }

// define a module
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})

export class AppRoutingModule { }


  //  { path: '**', redirectTo: 'dishes' },
];

html模块包含：

<a class="btn btn-primary" [routerLink]="['/ingredient-update', ingredient.ingredientId]">

我还尝试如下修改路由和html模块，但没有成功：

{ path: 'dishes/:dishId/ingredient-update/:ingredientId' }
[routerLink]="['/dishes', dishes.dishId, '/ingredient-update', ingredient.ingredientId]">

AppModule：

@NgModule({
  declarations: [
    AppComponent,
    DishesComponent,
    AboutComponent,
    IngredientsComponent,
    IngredientAddComponent,
    IngredientSingleComponent,
    DishAddComponent,
    DishDetailComponent,
    DishUpdateComponent,
    DishDeleteComponent,
    IngredientUpdateComponent,
    IngredientDeleteComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [DishService, IngredientService],
  bootstrap: [AppComponent]
})
export class AppModule {

  constructor() {

  }
}

Answer 1

经过反复试验，我很高兴找到解决方案：

正如我在问题中已经提到的那样，需要将dishId添加到参数中。使用两个id的方法如下：

// get route data (dishId and ingredientId)
this.sub = this.route.params.subscribe(
   params => {
      this.dishId = params['dishId'];
      this.ingredientId = params['ingredientId'];

我在后端使用ASP.NET Core和EF Core。成分实体确实已经有一个DishId，但是我忘了将DishId添加到成分dto中，因此它从未传递回来。

接下来，我还需要在Angular中将dishId添加到成分模型中。

然后我将路由更改为：

{ path: 'dishes/:dishId/ingredients/:ingredientId', component: IngredientUpdateComponent }

以及html链接：

<a class="btn btn-primary" [routerLink]="['/dishes', ingredient.dishId, 'ingredients', ingredient.ingredientId]">
            Edit
          </a>

角度：路由多个ID（父级和子级）

1 个答案: