0

here is my [app-routing.modulse.ts] module

const appRoutes: Routes = [
    { path: '', redirectTo: '/recipes', pathMatch: 'full' },
    { path: 'recipes', component: RecipesComponent, children: [
        { path: '', component: RecipeStartComponent },
        { path: ':id', component: RecipeDetailComponent },
    ] },
    { path: 'shopping-list', component: ShoppingListComponent },
];

@NgModule({
    imports: [RouterModule.forRoot(appRoutes)],
    exports: [RouterModule]
})

export class AppRoutingModule {

}

here is childComponent RecipeDetailsComponent ! and got error here while trying to access route params id

import { Component, OnInit, Input } from '@angular/core';
import { Recipe } from '../recipe.model';
import { RecipeService } from '../recipe.service';
import { ActivatedRoute, Params, Router } from '@angular/router';

@Component({
    selector: 'app-recipe-detail',
    templateUrl: './recipe-details.component.html',
    styleUrls: ['./recipe-details.component.css']
})

export class RecipeDetailComponent implements OnInit {
    recipe: Recipe;
    id: number;
    constructor(private recipeService: RecipeService,
        private route: ActivatedRoute,
        private router: Router) {
    }

    ngOnInit() {
        this.route.params.subscribe((params: Params) => {
            // error lies below
            this.id = +params['id'];
            this.recipe = this.recipeService.getRecipe(this.id);
        });
    }
}

i got an error message "object access via string literals is disallowed" while trying to get an access to dynamic route params id

Sterling Archer
  • 22,070
  • 18
  • 81
  • 118
ALEX
  • 11
  • 3
  • 3
    Possible duplicate of [How to rewrite code to avoid TSLint "object access via string literals"](https://stackoverflow.com/questions/33387090/how-to-rewrite-code-to-avoid-tslint-object-access-via-string-literals) – T.J. Crowder Mar 25 '19 at 15:13
  • Please [**search**](/search?q=%5Btypescript%5D+object+access+via+string+literals+is+disallowed) before posting. More about searching [here](/help/searching). – T.J. Crowder Mar 25 '19 at 15:13
  • i have serach before posting code . but i didnot find an suitable answere for me. any how thank you . – ALEX Mar 25 '19 at 15:18

1 Answers1

2

Could you try this?

route.params.subscribe((params: {id: string}) => {
  this.id = +params.id;
})

**I'm modifying this based on the comments

Just update the appRoutes as 

const appRoutes: Routes = [
 { path: 'recipes', component: RecipesComponent, children: [
 { path: ':id', component: RecipeDetailComponent },
 { path: '', component: RecipeStartComponent },
  ] }, //add the rest......
Seba Cherian
  • 1,755
  • 6
  • 18