Eckige 2-router-outlet-innerhalb der Komponente-Vorlage

Ich habe das Spiel mit Routen im Winkel 2, aber ich habe ein Problem, ich finde keine Antwort für. Meine Routen sind "arbeiten" aber nicht so, wie ich bin hoffen. Ich bin versucht, diese zu verwenden, wie Sie verwenden würden, ng-anzeigen von Winkel-1, meine Kopf-und Fußzeile ändern sich nie, und wenn meine url-änderungen neue "Zeug" gelegt in "eigene Inhalte".

Hier ist, was ich jetzt habe, die "arbeiten"

import { Component } from '@angular/core';
import { HeaderComponent } from './shared/header/header.component';
import { ContentComponent } from './shared/content/content.component';
import { FooterComponent } from './shared/footer/footer.component';
import { TestComponent } from './components/test.component';
import { Routes, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';

@Routes([
    {path: '/test', component: TestComponent }
])
@Component({
    selector: 'app',
    template: `<header></header>
    <a [routerLink]="['/test']">Click for testComponent</a>
    <router-outlet></router-outlet>
    <footer></footer>`,
    directives: [HeaderComponent, ContentComponent, FooterComponent, ROUTER_DIRECTIVES]
})
export class AppComponent { }

Was ich versuche zu tun, ist der router Steckdose in meinem ContentComponentso dass im wesentlichen der router nur dumps die neuen Sachen direkt in den main-Bereich meiner app. Wenn ich versuche zu umschreiben, dass:
<router-outlet></router-outlet>
wie
<content><router-outlet></router-outlet></content>
das routing nicht mehr funktioniert, keine Fehlermeldung, bleibt einfach stehen. Ich weiß auch nicht, siehe meine testComponent in den DOM, wenn ich überprüfen Sie es mit den devtools. Also dachte ich, gut, ich werde den router-Steckdose in der Vorlage meiner ContentComponent etwa so:

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

@Component({
    selector: 'content',
    template: `<router-outlet></router-outlet>`
})
export class ContentComponent { }

Aber wenn ich das mache bekomme ich die Fehlermeldung: Cannot find default-outlet.

Bin ich etwas fehlt, sondern die fehlende Dokumentation macht es sehr schwer herauszufinden, ich würde denken, es wäre ein Weg zu definieren, innerhalb @Strecken, auf denen meine Steckdose ist, aber wieder, können nicht finden, keine Dokumentation, nicht für die deprecated-router. Hoffe mir kann jemand etwas Licht in diese Schuppen. Vielen Dank im Voraus.

Hinweis: Allgemeine code-Kritik wäre auch hilfreich, ich bin ganz neu Eckig 2 und würde gerne die Beratung.

Haben Sie auch eine Route für ContentComponent? Wenn ja, können Sie bitte zeigen, wie gut?
wenn Sie sagen, route, meinst du aus wie ein Weg? wenn ja wäre es boilerPlate\app\shared\content\content.component.ts, Wenn nicht kannst du erklären, was du meinst mit Strecke?
Nein ich meinte so etwas wie dieses {path: '/test', Komponente: TestComponent }, die Sie definiert für TestComponent. Im Grunde möchte ich wissen, wie die Strecke geht, um ContentComponent von AppComponent. Es ist nicht in Ihrem code, wie es hier ist.
Meine zweite Frage ist, warum müssen Sie den zweiten router-Steckdose in ContentComponent Vorlage? Ihr setup mit einem in AppComponent mit Kopf-und Fußzeile auf oben und unten sieht es gut aus und sollte die Arbeit zu erhalten erledigt für Sie.
Ich bin versucht zu strukturieren, wie dies @Component({ selector: 'app', template: <header></header> <a [routerLink]="['/test']">Klicken Sie für testComponent</a> <content></content> <footer></footer>, directives: [HeaderComponent, ContentComponent, FooterComponent, ROUTER_DIRECTIVES] }) Dies beinhaltet <content> Ich kann demo-text in Kontexten, in Vorlage, und ich sehe es, wo ich will auf dem Bildschirm, so dass ich dachte, nach dieser Logik, einschließlich der <router-outlet - > anzeigen würde, genau wie mein test-text wäre.

InformationsquelleAutor Colton Williams | 2016-06-06

  1. 5

    Den Weg, Ruf Sie an ContentComponent über <content> tag macht ContentComponent ein Kind Ihrer AppComponent und Sie können nicht einen router-outlet-innen eine untergeordnete Komponente der Vorlage. Ein Weg, das zu erreichen, was Sie nach sind, ist das erstellen einer default-route für die ContentComponent in der AppComponent:

    @Routes([
    { path: '/', component: ContentComponent }
    { path: '/content', component: ContentComponent }
])

    Und AppComponent Vorlage:

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

    Nun können Sie festlegen, verschachtelte Routen in ContentComponent wie diese:

    @Routes([
    { path: 'content1', component: Content1Component }
])
@Component({
    selector: 'content',
    template: `<router-outlet></router-outlet>`
})
export class ContentComponent { }

    Und wenn Sie ein Menü in den header-Komponente verlinken möchten jede verschachtelte Inhalte, die Sie dies tun können:

    <a [routerLink]="['/content', 'content1']">Content1</a>

    Dem laden Content1Component in die ContentComponent ist <router-outlet>

    Ich werde versuchen, dies so bald wie ich an die Arbeit morgen, ich denke, das ist Recht. Es sieht vertraut, aber jetzt macht es Sinn! Danke! Ich lasse Sie wissen, was passiert.
    Sicher, lassen Sie mich wissen, wenn es nicht funktioniert, und wir werden damit es funktioniert 🙂
    Es funktioniert!, dies ist, was ich versuche zu tun. Ich habe eine Frage though. Ist dieses "Recht"/vorgesehene Art und Weise zu nähern routing im Winkel 2, oder bin ich hacken es, um es arbeiten wie Winkel 1?
    Nein, ich glaube nicht, dass es einen hack oder so etwas, das ist, wie ich es in meinem Projekt und habe gesehen, es geschieht auf die gleiche Weise auf andere Beispiele im web. Just bewusst sein, dass die RC1-Router hat einige bugs und Probleme, die behoben werden in der finalen version.
    Ist es möglich mit [routerLink] innerhalb anderer Komponenten (wie Fußzeile)? In Angular1, die ich verwenden kann href='#whatever-view' überall, aber in Angular2 wenn ich href='my-link', wird die gesamte Applikation neu laden, verwenden Sie [routerLink] gab mir ORIGINAL EXCEPTION: No provider for Router! Fehler...

    InformationsquelleAutor Morteza Manavi

Schreibe einen Kommentar