Router-Steckdose und Fußzeile in Angular 2

Ich bin neu in Angular. Ich erstelle eine Anwendung, die zwei Abschnitte haben wird. Der erste Abschnitt wird abhängig von der Route geladen. Die zweite Sekunde wird eine Fußzeile sein, die in allen Ansichten gleich ist.Router-Steckdose und Fußzeile in Angular 2

index.html

<body> 
<app-root>Loading...</app-root> 
</body>

app-routing.module.ts

{ path: '', component: HomeComponent }

app.component.ts

import { Component } from '@angular/core'; 
@Component({ 
moduleId: module.id, 
selector: 'app-root', 
templateUrl: './app.component.html' 
}) 
export class AppComponent { 
}

app.component.html

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

import {Component} von '@ Winkel/core';

home.component.ts

@Component({ 
selector: 'app-home', 
templateUrl: './home.component.html' 
}) 
export class HomeComponent { }

home.component.html

<div> 
<p>Home page will come here</p> 
</div>

footer.component.ts

import { Component } from '@angular/core'; 

@Component({ 
selector: 'app-footer', 
templateUrl: './footer.component.html' 
}) 

export class FooterComponent {}

footer.component.html

<p>Footer will come here</p>

Der Bildschirm zeigt diese

Footer kommen hier

Startseite kommen hier

erwarte ich, dass die Router- Ausgang, um die HomeComponent zuerst zu rendern. Dann sollte die App-Fußzeile Komponente geladen werden. Aber es wird in umgekehrter Reihenfolge wiedergegeben.

Was kann ich tun, damit sie in der richtigen Reihenfolge gerendert werden?

Quelle

2017-02-21 Amit Saxena

Sie können unter https://github.com/g7bhatia/stackexample diesen nur App-Ordner Inhalt überprüfen und es wird wie erwartet gedruckt.

Quelle

2017-02-21 07:48:28 Gourav

Danke für die Antwort, das funktioniert, welche Änderungen haben Sie vorgenommen? Außerdem sehe ich eine Route für die FooterComponent, ist das nötig? –

Great..versuchen Sie immer, Ihre Komponente mit dem angegebenen Befehl zu machen. Befehl: ng Komponent yourComponentName. wird es automatisch alle Module aktualisieren. – Gourav

Okay, und was macht der OnInit? Wird es benötigt? –

Router-Steckdose und Fußzeile in Angular 2

Antwort

Verwandte Themen