Unable to show content with ngIf after getting previous URL in Angular-CodePudding

I am attempting to show specific content on a Help page depending on the previous page the User was on. For instance if the user was on the store page, it should only show help content related from the store. I get the previous URL as follows:

previousUrl: string = '';
currentUrl: string = '';
isHome: boolean = false;
isChallenges: boolean = false;
isSchedule: boolean = false;
isStore: boolean = false;

constructor(public router: Router) { }

ngOnInit(): void {
  this.router.events.pipe(
    filter((event): event is NavigationEnd => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      this.previousUrl = this.currentUrl;
      this.currentUrl = event.url;
      console.log('previous url: ', this.previousUrl);

      var URL = this.previousUrl;
      if (URL.includes('Home')) {
        this.isHome = true;
      }
      if (URL.includes('Challenge')) {
        this.isChallenges = true;
      }
      if (URL.includes('Schedule')) {
        this.isSchedule = true;
      }
      if (URL.includes('Store')) { 
        this.isStore = true;
      }
    });
  }

The correct URL comes through in the console log, however when I test it in the HTML:

<div *ngIf="!isHome==true">
    <p>am i getting home</p>
</div>
<div *ngIf="!isStore==true">
    <p>am i getting store</p>
</div>
<div *ngIf="!isSchedule==true">
    <p>am i getting schedule</p>
</div>

I am confronted with only a blank screen.

CodePudding user response：

For multiple if-cases, its simpler to use ngSwitch. Try these changes

Code Behind

previousPage = '';
// ...
var URL = this.previousUrl;
if (URL.includes('Home')) {
  this.previousPage = 'home';
}
if (URL.includes('Challenge')) {
  this.previousPage = 'challenge';
}
if (URL.includes('Schedule')) {  
  this.previousPage = 'schedule';
}
if (URL.includes('Store')) { 
  this.previousPage = 'store';
}

HTML

<ng-container [ngSwitch]="previousPage">
    <ng-container *ngSwitchCase="'home'">Home Page Help</ng-container>
    <ng-container *ngSwitchCase="'challenge'">Challenge Page Help</ng-container>
    <ng-container *ngSwitchCase="'schedule'">Schedule Page Help</ng-container>
    <ng-container *ngSwitchCase="'store'">Store Page Help</ng-container>
    <ng-container *ngSwitchDefault>Default Page Help</ng-container>
</ng-container>

CodePudding user response：

If you are seeing a blank screen then I think maybe you have forgotten to register your routes into the module.

 RouterModule.forRoot([
      {
        path: 'home',
        component: AppComponent,
      },
      {
        path: 'store',
        component: AppComponent,
      },
      {
        path: 'schedule',
        component: AppComponent,
      },
      {
        path: '**',
        redirectTo: 'home',
      },
    ]),
  ],

the other thing to keep in mind... depending how you are utilizing your component/s you may not be unloading the component. Which means that state would persist across navigations. In this case you'd need to reset the state on each change too.

.subscribe((event: NavigationEnd) => {
        this.previousUrl = this.currentUrl;
        this.currentUrl = event.url;
        console.log('previous url: ', this.previousUrl);
        this.isHome = false;
        this.isSchedule = false;
        this.isStore = false;

        var URL = this.previousUrl;
        if (URL.includes('home')) {
          this.isHome = true;
        }
        if (URL.includes('schedule')) {
          this.isSchedule = true;
        }
        if (URL.includes('store')) {
          this.isStore = true;
        }
      });

here is a functional example you can refer to on StackBlitz