Angular ngIf 路由器具有 /id（/a 动态编号）

Question

I have created this in the main.ts which gets the route url:

router: string;

constructor(private _router: Router) { 
    this.router = _router.url; 
}

This works well. Then in the main.html:

<app-main-menu *ngIf="router == '/'"></app-main-menu>
<app-item-list *ngIf="router == '/list'"></app-item-list>

<app-item-info *ngIf="router == '/:id'"></app-item-info> <!-- THIS DOES NOT WORK -->

When the route is /2 or /35 (or any number) I cannot get the app-item-info ngIf to work.

My question is, how can I set the *ngIf to show (true) when I always have a string " / " with a dynamic number " 345 " ?

Example: When the URL (route is ): localhost:4200/2 , the ngIf should display app-item-info.

EDIT: I cannot use <router-outlet> as I am using it for a different thing. Showing pages.

Answer 1

I recommend to use <router-outlet> to implement this functionality. Check out the official Angular documentation about the routing: https://angular.io/guide/router

Live example: https://stackblitz.com/angular/aqqyljyojye

Answer 2

Can this help you?

<app-item-info *ngIf="isItemInfoRoute(router)"></app-item-info>

and in .ts

isItemInfoRoute(router: string) {
   return router.search(/^\/\d+/) > -1
}