CODEWITHSUNDEEP
angular
Dean Johns
Dean Johns

Reputation: 498

Cannot match any router for component in Angular

In my project, I need to create a path like this: "myapp/category/subcategory"

myapp/ is a constant and category has a variable as "cat.title" and subcategory has a variable as "sub.title".

To create that, I have a JSON data which has category details and sub category details. To create links, I use the following html.

<dl *ngFor="let cat of json">
 <dt *ngIf="cat.parent_id=='0';then m"></dt>
  <ng-template #m><dt><a routerLink="{{cat.title}}" routerLinkActive="active">{{cat.title}}</a></dt>
    <dl *ngFor="let sub of json">
 <dt *ngIf="sub.parent_id==cat.id;then s"></dt>
    <ng-template #s><dd><a routerLink="{{cat.title}}/{{sub.title}}" routerLinkActive="active">{{sub.title}}</a></dd></ng-template>
   </dl>
 </ng-template>
</dl>

I need these "cat.title" and "sub.title" values as variables for another components. So I created routes like this in module.ts:

const appRoutes: Routes = [
  { path: ':cat.title', component: CatComponent, children: [
    { path: ':cat.title/:sub.title', component: SubCatComponent }
  ] },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
    ];

After accessing these components, I need these router parameters to generate a specific URL like this:

CatComponent.ts

export class FilterSubComponent implements OnInit {

    cat;
    temp;

  constructor(private httpClient:HttpClient, private route: ActivatedRoute) {
    this.route.params.subscribe((params:any) => {this.temp = 'http://myapp/'+params["cat.title"]; this.ngOnInit()})
   }

  ngOnInit() {
        this.httpClient.get(this.temp)

    .subscribe(
        dat => {
          this.cat = dat["data"];
        }
      )
  }
}

SubCatComponent.ts

export class FilterSubComponent implements OnInit {

    cat;
    temp;

  constructor(private httpClient:HttpClient, private route: ActivatedRoute) {
    this.route.params.subscribe((params:any) => {this.temp = 'http://myapp/'+params["cat.title"]+'/'+params["sub.title"]; this.ngOnInit()})
   }

  ngOnInit() {
        this.httpClient.get(this.temp)

    .subscribe(
        dat => {
          this.cat = dat["data"];
        }
      )
  }
}

The CatComponent is performing very well, so when I click on a category, it shows the data. But when I click a sub category in the anchor list, console says "cannot match any route".

I can do this correctly by bringing the child route out of the parent route, but when I applying Breadcrum navigation, I think I have to do this as child route. How can I solve this?

Upvotes: 0

Views: 75

Answers (2)

esakki
esakki

Reputation: 153

Add this in your category.component.html

<router-outlet></router-outlet>

In your ts file the routing should be in paramMap category.component.ts

ngOnInit() {
this.route.paramMap.subscribe((params: ParamMap) => {
  let id = params.get('id');
  this.router.navigate(['/category', id]);
});

}

app.module.ts

{ path: 'category', component: categoryComponent },
{ 
path: 'category/:id', 
component: subcategoryComponent,
}

Upvotes: 2

Antoniossss
Antoniossss

Reputation: 32517

  { path: ':cat.title', component: CatComponent, children: [
    { path: ':cat.title/:sub.title', component: SubCatComponent }
  ] },

actual child would be 

  { path: ':cat.title', component: CatComponent, children: [
    { path: ':sub.title', component: SubCatComponent }
  ] },

Upvotes: 2

Related Questions