Winkel-2 set-Standard-Inhalte in den router-Steckdose

Möchte ich einige Standard-text in der router-Steckdose, bis es gefüllt ist.

Habe ich eine übergeordnete Komponente, die die Darstellung der Kind-route-Komponente in der router-outlet auf dieser Seite.

Gibt es 2 buttons, füllen Sie die router-Steckdose mit dem Kind Komponente, wenn geklickt wird. Wie kann ich Inhalte in der router-Steckdose zB. 'Klicken Sie auf eine der Optionen zum anzeigen der Daten", dann einmal auf die Schaltfläche geklickt wird diese Nachricht löscht und der untergeordneten Komponente zeigt in der router-Steckdose?

<div class="container pt-3">
    <div class="clearfix">
        <div class="btn btn-outline-success float-left"
            routerLink="/unpaid/people">
            View People
        </div>
        <div class="btn btn-outline-success float-right"
            routerLink="/unpaid/bills">
            View Bills
        </div>
    </div>
</div>
<router-outlet>Click an options to display the data</router-outlet>

BEARBEITEN
hier sind meine Strecken

path: 'unpaid', component: UnpaidBillsComponent,
    children: [
      {path: 'people', component: UnpaidPeopleComponent},
      {path: 'bills', component: UnpaidBillListComponent}
    ]
  • Sie kann dies nicht tun , müssen Sie sich bei der router-Ereignisse in der Reihenfolge zu zeigen, einen laden oder einen beliebigen text, die Sie wollen, zu erscheinen
InformationsquelleAutor dale | 2017-10-21
  1. 11

    Standard-text in der router-Steckdose, bis es gefüllt ist

    Erstens, deine Annahme hier ist falsch, der Inhalt wird nicht eingefügt innen der Steckdose, aber unten es.

    Können Sie einen Standard-Inhalt in der Vorlage, aber Sie können die default-route mit dem Standard-Inhalt. Verwenden Sie einfach path: '' und verwenden Sie eine component mit Ihrem "default" - template.

    Erstellen einer Komponente mit dem "default" - Vorlage, die Sie benötigen:

    @Component({template: `Default template here`})
export class DefaultTemplateComponent {}

    Und fügen Sie es Ihrer Routen.

    children: [
  {path: '', component: DefaultTemplateComponent},
  {path: 'people', component: UnpaidPeopleComponent},
  {path: 'bills', component: UnpaidBillListComponent},
]
    • Siehe edit mit dem route-config
    • So sagen Sie, erstellen Sie eine Dritte Komponente, die die Meldung anzeigt?
    • Yup, siehe meine aktualisierte Antwort.
    • Ja, das funktioniert der trick. Dachte es gibt vielleicht einen einfacheren Weg oder weniger Arbeit als das erstellen einer neuen Komponente für eine einfache Textzeile, aber es funktioniert trotzdem, also danke.
    • Es ist nicht viel, wirklich. Der Schnipsel den ich gepostet ist minimal, aber es ist genau das, was Sie brauchen: Es sind nur zwei Zeilen über das, was Sie vor hatte: exportieren einer Klasse und hinzufügen von leer-Pfad-route definition. Sie brauchen keine Auswahl oder Stile in Ihre Komponenten, so kann man wirklich nur inline mit template:.
    InformationsquelleAutor Lazar Ljubenović
  2. 3

    In Der Vorlage:

    <p *ngIf="showDefaultMessage">Click an options to display the data</p>
<router-outlet (activate)="toggleDefaultMessage(false)" (deactivate)="toggleDefaultMessage(true)"></router-outlet>

    dann in Komponente wechseln Sie einfach "showDefaultMessage" Eigenschaft:

    private showDefaultMessage = true; //default state

toggleDefaultMessage(state: boolean) {
    this.showDefaultMessage = state;
}
    InformationsquelleAutor M S
  3. 0
    children: [
  {path: '', redirectTo: '/people', pathMatch: 'full'},
  {path: 'people', component: UnpaidPeopleComponent},
  {path: 'bills', component: UnpaidBillListComponent}
]
    • Ich bin nicht wollen, um die Umleitung zu, ich bin zu wollen, um anzeigen von Inhalten in der router-Ausgang, bevor man das Kind Routen zugegriffen wird.
    • dann müssen Sie erstellen Sie eine weitere Komponente, die für diesen text "Klicken Sie auf "Optionen", um die Daten anzuzeigen" und-redirect auf die gleiche Komponente.
    InformationsquelleAutor Dinesh Kumar
  4. 0
    <div class="col-sm-10">
<router-outlet></router-outlet>
<a routerLink="/" routerLinkActive #rla="routerLinkActive" 
   [routerLinkActiveOptions]="{exact:true}">
  <h5 *ngIf="rla.isActive" class="beauty">Click on any button to start!</h5>
</a>
</div>

    https://angular.io/api/router/RouterLinkActive

    InformationsquelleAutor Div
Schreibe einen Kommentar