Winkel 4 Abschnitt Aktualisieren der Seite nur

Hallo community, ich habe ein Plunker wo ich umgesetzt haben, diesen Fluss:

Aktualisiert Plunker: ich gelöst, aber die header-Komponente wird jedes mal aufgerufen, und ich habe meine header-Komponente in jeder html-gibt es einen besseren Weg, es zu tun?

  1. Login
  2. Zeigt eine Liste von Ländern (Benutzer-info)
  3. Klicken Sie auf eines der Länder, und zeigen Sie details zu (Problem ist hier)
  4. Gehen Sie zurück zur Liste

Ich aktualisieren müssen, nur den Abschnitt der Länder-Liste, aber in meinem plunker können Sie sehen, die ganze Seite ist erfrischend, ich will, dass die Benutzer-info auf der Oberseite (statisch).

Habe ich wenig Erfahrung.
Vielen Dank!

@Component({
selector : 'login',
template: `
<input type="text" value="james">
<input type="password" value="123">
<button (click)="logIn()">Login</button>
`
})
class LoginComponent {
constructor(private route: ActivatedRoute,
            private router: Router) { }

    logIn () {
        //LOGIN LOGIC
        this.router.navigate(['/base']);
    }
}

InformationsquelleAutor Diego | 2017-07-08

  1. 0

    Den router-outlet zeigt den Inhalt der route.
    Das bedeutet, Sie müssen Ihre Benutzer-template-code über die router-outlet so ist es wone betroffen sein, indem Ihre route...

    <label>User: Mr. James</label> 
  <label>Role: Administrator</label>
  <hr>
<router-outlet>
    Ich habe bereits, tag in der root-Komponente. Putting-router Steckdose gibt es nicht die Länder-Liste.

    InformationsquelleAutor TheUnreal

  2. 0

    erstellen Sie zunächst common-header-Komponente und Rendern Sie Ihre Komponenten mit routerLink und router.navigate

    eckig doc haben, gutes Beispiel
    https://angular.io/guide/router

    plunker https://plnkr.co/edit/ApjJkNwS6hfS56DjL7vt?p=preview

    Ich habe es geschafft, wie hier (plnkr.co/Bearbeiten/pNoGFP6fva4SYmcspoOj?p=Album Vorhören), aber die header-Komponente wird jedes mal aufgerufen, und das brauche ich nicht, gibt es einen anderen Weg?

    InformationsquelleAutor CharanRoot

  3. 0

    Habe ich es endlich geschafft, diese zu lösen! Ich hatte den Weg gefunden, es zu tun, aber es war nicht die richtige Herangehensweise. Hier ist die Lösung: http://plnkr.co/edit/pNoGFP6fva4SYmcspoOj?p=preview

    Ich verwendet, Kinder Komponenten im routing-Konfiguration und ändern Sie die Art und Weise Navigationen durchgeführt werden:

     this.router.navigate(['/base',  { outlets: { mod : ['countrydetail', country_id ] } } ]);

    wo:

    • /base ist der Ursprung Komponente, wobei die navigation starten.
    • mod ist die Steckdose Namen (Kinder im app.routing)
    • countrydetail die Kind-Komponente name
    • country_id: ein parameter

    InformationsquelleAutor Diego

Schreibe einen Kommentar