Angular 4 Elternrouter Outlet von Child Route

Ich versuche, eine anpassbare navbar in meiner eckigen Anwendung zu erreichen.Angular 4 Elternrouter Outlet von Child Route

Hier meine app.component Vorlage

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand pageTitle">iMobile</a> 
    </div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
      <router-outlet name="navbar"></router-outlet> 

      <ul class="nav navbar-nav navbar-right" *ngIf="authenticated"> 
       <li><a [routerLink]="['/login']"><span class="glyphicon glyphicon-log-out"></span> Log Out</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

<alert></alert> 
<router-outlet></router-outlet>

und mein app.routing hier

import { Routes, RouterModule } from '@angular/router'; 

import { AuthGuard } from './_guards/index'; 

import { LoginComponent } from './login/index'; 

// Reports section of the website 
import { ReportsComponent } from './reports/index'; 
import { DashboardComponent } from './reports/dashboard/index'; 
import { SampleComponent } from './reports/sample/index'; 

// Corporate section of the website 
import { CorporateComponent } from './corporate/index'; 
import { CorpNavbarComponent } from './corporate/corpNavbar/index'; 

const appRoutes: Routes = [ 
    { path: 'login', component: LoginComponent }, 
    { 
     path: 'reports', component: ReportsComponent, canActivate: [AuthGuard], 
     children: [ 
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' }, 
      { path: 'dashboard', component: DashboardComponent }, 
      { path: 'sample', component: SampleComponent } 
     ] 
    }, 
    { 
     path: 'corporate', component: CorporateComponent, canActivate: [AuthGuard], 
     children: [ 
      { path: '', component: CorpNavbarComponent, outlet: 'navbar'} 
     ] 
    } 


    // otherwise redirect to home 
    { path: '**', redirectTo: 'reports' } 
]; 

export const routing = RouterModule.forRoot(appRoutes);

Was ich möchte, das Navigationsabschnitt der navbar Lage sein, basierend zu ersetzen auf dem Abschnitt der Website. Ist das möglich?

Quelle

2017-06-26 Irrelevant_Coder

Nicht sicher, ob ich Ihre Frage richtig verstanden habe, aber ich werde es versuchen. Also beabsichtigen Sie, Teile Ihrer Navbar zu ersetzen, abhängig von der Seite, in der Sie sich gerade befinden?

Sie können eine App-Komponente als Hub für alle dynamischen Teile Ihrer App verwenden. Nehmen wir an, Sie haben App-Komponente als Ihre grundlegende HTML-Struktur und drei weitere Komponenten, die jeweils Navbar1, Navbar2 und Inhalt sind.

app.component:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title></title> 
    </head> 
    <body> 
    <router-outlet name="nav"></router-outlet> 

    <router-outlet name="content"></router-outlet> 
    </body> 
</html>

Und dann müßten Sie in Ihren Routen angeben, wo die Komponente geladen werden muss:

const routes: Routes = [ 
    { path: '', redirectTo: 'home', pathMatch: 'full', outlet: }, 
    { path: 'home', component: HomeComponent, outlet: content }, 
    { path: 'category1', component: Navbar1, outlet: navbar1 },

Dieser Link helfen können Sie es herausfinden.

http://onehungrymind.com/named-router-outlets-in-angular-2/

Quelle

2017-06-26 20:23:18 anazard

Ich bin schon auf diesen Artikel gestoßen. Es geht darum, benannte Steckdosen speziell für die Kinderroute zu verwenden. Was ich versuche zu erreichen (und das kann sehr wohl unmöglich sein), ist, eine Komponente der Steckdose in app.component von der untergeordneten Route zuzuweisen. Wenn ich dies mit dem von mir geposteten Code mache, erhalte ich den Fehler "Kann die Outlet-Navbar nicht finden, um 'CorpNavbarComponent' zu laden". –

@Irrelevant_Coder Haben Sie eine Abhilfe gefunden? Ich fand dieses Problem https://github.com/angular/angular/issues/10726 Wirklich mehr so dieses https://github.com/angular/angular/issues/18271#issuecomment-348071491 – epelc

@epelc danke für das Folgen . Ich habe nie einen Workaround dafür gefunden. Ich musste nur die Funktion ablegen, die ich erreichen wollte, bis ein Fix implementiert wurde. –

Angular 4 Elternrouter Outlet von Child Route

Antwort

Verwandte Themen