Wie Identität Seite nicht gefunden Route in Root-Komponente [Angular 2]?

Question

Ich arbeite an einem Beispiel Angular 2-Anwendung, die auch Routing-Funktion hat, und unten ist meine Routing-Code.

.... 
... 
RouterModule.forRoot([ 
     { path: '', component: LoginComponent },   
     { path: "spa/home", canActivate: [canActivateGuard], component: HomeComponent }, 
     { path: 'spa/about', canActivate: [canActivateGuard], component: AboutComponent }, 
     { path: 'spa/login', component: LoginComponent }, 
     { path: '**', component: PageNotFoundComponent} 
    ]) 
.... 
.... 

In meiner Stammkomponente, basierend auf dem aktuellen Route, braucht es den Wert „blnDisplayMenu“ zu wahr oder falsch zu setzen. Der folgende Code in der Root-Komponente setzt "blnDisplayMenu" auf "false", wenn die aktuelle Route "/ spa/login" lautet.

ngOnInit() { 

    this.router.events.subscribe(e => { 
     if (e instanceof NavigationEnd) { 
      if (e.url == '/' || e.url == '/spa/login') {     
       this.blnDisplayMenu = false; 
      } 
      else {      
       this.blnDisplayMenu = true; 
      } 
     } 
    }); 
} 

Meine Frage ist, wie man "blnDisplayMenu" auf falsch setzt, auch wenn die aktuelle Route "**" ist.

Answer 1

Ich denke, dass Sie mehr Details über Bedingungen hinzufügen müssen, wenn Sie Ihr blnDisplayMenu true/false möchten. Basierend auf begrenzten Informationen, hier ist was ich denken kann: Versuchen Sie, zwei Bedingungen zu machen. 1) Wenn Sie möchten, dass Ihre blnDisplayMenu wahr 2) Wenn Sie Ihr blnDisplayMenu falsch

ich nur eine Probe setzen, basierend auf obigen Code bin machen wollen, um unter der Annahme, diese beiden Strecken (Spa/über und Spa/home) Sie will blnDisplayMenu als wahr haben.

Da "**" für jede Route steht, also wenn Sie alle Router abgedeckt haben, für die Sie blnDisplayMenu true festlegen möchten, wird rest all automatisch in der else-Klausel behandelt.

ngOnInit() { 
    this.router.events.subscribe(e => { 
     if (e instanceof NavigationEnd) { 
      if (e.url == '/spa/about' || e.url == '/spa/home') { // add any other route where you want blnDisplayMenu = true 
       this.blnDisplayMenu = true; 
      }else{ 
       this.blnDisplayMenu = false; 
      } 
     } 
    }); 
} 

Answer 2

Mit Nutzung von NavigationEnd und von seiner URL müssen Sie alle Ihre gültige URL vergleichen und benötigen blnDisplayMenu Wert true oder false zu setzen, sondern die ganze Strecke zu vergleichen ist nicht gut, Art und Weise, so dass Sie data Möglichkeit Route verwenden können Aufbau.

Set ein Flag displayMenu als Daten auf dem Weg sagen für ** wie folgt:

RouterModule.forRoot([ 
    { path: '', component: LoginComponent },   
    { path: "spa/home", canActivate: [canActivateGuard], component: HomeComponent }, 
    { path: 'spa/about', canActivate: [canActivateGuard], component: AboutComponent }, 
    { path: 'spa/login', component: LoginComponent }, 
    { path: '**', component: PageNotFoundComponent, data : { displayMenu: false } } 
]) 
...... 

Dann ActivatedRoute in Ihrer Komponente verwenden, um zu überprüfen, ob displayMenu Variable ist oder nicht auf Ihrem ActivatedRoute.

@Component() 
export class OneComponent implements OnInit { 
    constructor(private route: ActivatedRoute) {} 

    ngOnInit() { 
    this.obs = this.route 
     .data 
     .subscribe(v => { 
     if(v.displayMenu === false) { 
      this.blnDisplayMenu = false; 
     } 
     }); 
    } 

    ngOnDestroy() { 
    this.obs.unsubscribe(); 
    } 
}