Beste Methode, um verschiedene Layouts für verschiedene Seiten im Winkel 4

Ich bin neu eckig 4. Was ich versuche zu erreichen ist, verschiedene layout-Kopf-und Fußzeilen für verschiedene Seiten in meinem app. Ich habe drei verschiedene Fälle:

Routen: ['login','anmelden']

- Marketing-Website-Seite (das ist der root Weg und es hat eine Kopfzeile und eine Fußzeile, vor allem diese Abschnitte kommen vor dem login)

Routen : [",'about','Kontakt']

App angemeldet Seiten (ich habe eine andere Kopf-und Fußzeile in diesem Abschnitt für alle app-Seiten, aber diese header-und footer-unterscheidet sich von der marketing-Seite Kopf-und Fußzeile)

Routen : ['dashboard','Profil']

Ich die app starte, vorübergehend durch hinzufügen einer Kopf-und Fußzeile auf meine router-Komponente "html".

Bitte informieren Sie mich, ein besserer Ansatz.

Dies ist mein code:

app\app.routing.ts

   const appRoutes: Routes = [
        { path: '', component: HomeComponent},
        { path: 'about', component: AboutComponent},
        { path: 'contact', component: ContactComponent},
        { path: 'login', component: LoginComponent },
        { path: 'register', component: RegisterComponent },
        { path: 'dashboard', component: DashboardComponent },
        { path: 'profile', component: ProfileComponent },


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

    export const routing = RouterModule.forRoot(appRoutes);

app.component.html

<router-outlet></router-outlet>

app/home/home.component.html

<site-header></site-header>
<div class="container">
    <p>Here goes my home html</p>
</div>
<site-footer></site-footer>

app/about/about.component.html

<site-header></site-header>
<div class="container">
    <p>Here goes my about html</p>
</div>
<site-footer></site-footer>

app/login/login.component.html

<div class="login-container">
    <p>Here goes my login html</p>
</div>

app/dashboard/dashboard.component.html

<app-header></app-header>
<div class="container">
    <p>Here goes my dashboard html</p>
</div>
<app-footer></app-footer>

Sah ich diese Frage auf stack-overflow, aber ich habe nicht ein klares Bild von dieser Antwort

InformationsquelleAutor ninja dev | 2017-10-02

73

Können Sie lösen Ihr problem mit Kind Routen.

Finden Sie unter arbeiten demo auf https://angular-multi-layout-example.stackblitz.io/ oder Bearbeiten Sie auf https://stackblitz.com/edit/angular-multi-layout-example

Legen Sie Ihre route wie unten
```
const appRoutes: Routes = [

    //Site routes goes here 
    { 
        path: '', 
        component: SiteLayoutComponent,
        children: [
          { path: '', component: HomeComponent, pathMatch: 'full'},
          { path: 'about', component: AboutComponent }
        ]
    },

    //App routes goes here here
    { 
        path: '',
        component: AppLayoutComponent, 
        children: [
          { path: 'dashboard', component: DashboardComponent },
          { path: 'profile', component: ProfileComponent }
        ]
    },

    //no layout routes
    { path: 'login', component: LoginComponent},
    { path: 'register', component: RegisterComponent },
    //otherwise redirect to home
    { path: '**', redirectTo: '' }
];

export const routing = RouterModule.forRoot(appRoutes);
```
Empfohlen Referenz: http://www.tech-coder.com/2017/01/multiple-master-pages-in-angular2-and.html

Demo half wirklich nicht viel, ich hatte ein wenig harte Zeit, dies zu verstehen, vor allem konnte ich nicht bekommen, was leer-Pfad: "bedeutet, dass, wenn es war Weg: 'admin' generierte links würde mit admin/profile, aber da seine leere, es entspricht Haupt-url-links wie '/profile' und wenn das Kind Weg ist auch Weg: "es entspricht Startseite ". War auch nicht viel klar, was exactli, sind die Komponenten: Komponenten, die ich nur verlassen, <router-outlet></router-outlet - > im original und post alle Inhalte, die in neu erstellten Komponenten. Aber big tnx 🙂
Vielen Dank für diese Antwort. Es klärte sich eine Frage, die ich hatte, worin mein layout-Komponente hatte eine benannte router, verursacht alle möglichen Probleme. Einfach entfernen es hat alles wie gewünscht funktioniert.
Vielen Dank @Rameez

InformationsquelleAutor Rameez Rami

können Sie Kind z.B.

const appRoutes: Routes = [
    { path: '', component: MainComponent,
        children:{
            { path: 'home'  component:HomeComponent},
            { path: 'about', component: AboutComponent},
            { path: 'contact', component: ContactComponent},
               ..others that share the same footer and header...

        }
    },
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegisterComponent },
    { path: 'admin', component:AdminComponent, 
         children{
            { path: 'dashboard', component: DashboardComponent },
            { path: 'profile', component: ProfileComponent }
               ..others that share the same footer and header...
         }
    }
    { path: '**', redirectTo: '' }
];

MainComponent und AdminComponent wie

<app-header-main></app-header-main>
<router-outlet></router-outlet>
<app-footer-main></app-footer-main>

post talk über separate werden in verschiedenen Dateien die Routen

wie pro die Antwort der url "admin/dashboard', 'admin/profile', ich don T wollen dies geschehen kann.. will ich ein set von urls als 'dashboard', 'Profil'. gibt es eine Möglichkeit?
Ich möchte sagen, dass wenn Sie zwei verschiedene Fußzeilen Sie können, machen Sie eine Fußzeile mit einem @ - Eingang und *ngIf zu zeigen, den einen oder anderen view oder zwei Fußzeilen. Es ist trotzdem nur ein Beispiel. Sie können als "Kinder" der Pfad: ",Komponente:MainComponent, Ihre DashboardComponent, und Profil und vergessen Sie den Pfad:admin
seine hilfreich, wenn Sie wotking mit admin-Routen. Dank für das geben mir die Idee.

InformationsquelleAutor Eliseo

0

Gibt es Fälle, in denen das layout und gemeinsam genutzte Elemente, die nicht wirklich passen die routing-Struktur, oder einige Elemente ausgeblendet/angezeigt, je nachdem eine pro-route-basis. Für solche Fälle kann ich denken Sie an die folgenden Strategien (nehmen wir ein Beispiel von app-header-main Komponente - aber es gilt für alle freigegebenen Seite element offensichtlich):

Eingänge & css-Klassen

Können Sie ein-oder css-Klassen zur Steuerung der inneren Erscheinung Ihres gemeinsamen Elementen, wie:
1. <app-header-main [showUserTools]="false"></app-header-main>
oder
1. <app-header-main class="no-user-tools"></app-header-main> und dann verwenden :host - (.no-user-tools) zum ein - /ausblenden, was zu
oder
1. in eine route-Ebene (Kind oder nicht):
```
{
  path: 'home',
  component: HomeComponent,
  data: {
    header: {showUserTools: true},
  },
},
```
Und auf Sie durch ActivatedRoute etwa so: this.route.data.header.showUserTools

TemplateRef input

Innen app-header-main Komponente:

@Input() rightSide: TemplateRef<any>;

Eingang Typ TemplateRef<any> wo man konnte Sie füttern ein ng-template element direkt
```
<app-header-main [rightSide]="rightside"></app-header-main>
<ng-template #rightside>your content here</ng-template>
```
Namens slot transklusion

Können Sie den Autor der app-header-main, so dass es verwendet benannte slot transklusion

Innerhalb der app-header-main Vorlage:

<ng-content select="[rightSide]"><ng-content>

Verwendung:
```
<app-header-main class="no-user-tools">
  <div rightSide>your content here</div>
</app-header-main>
```
InformationsquelleAutor user776686

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

app\app.routing.ts

app.component.html

app/home/home.component.html

app/about/about.component.html

app/login/login.component.html

app/dashboard/dashboard.component.html

Eingänge & css-Klassen

TemplateRef input

Namens slot transklusion