web-dev-qa-db-fra.com

Changer de routeur-prise avec * ngIf dans app.component.html dans angular2

J'utilise angular 2.0 final. J'essaie de changer l'emplacement du router-outlet dans le principal app.component.html. Le modèle est en train de se mettre à jour, sauf la première fois que j'utilise router.navigate, le composant ne s'affichera pas dans le nouveau routeur-prise et il n'y a pas d'erreur. La seconde et chaque fois après que j'utilise router.navigate, il fonctionne correctement.

exemple de template de app.component.html 

   <div *ngIf="authenticated() == false">
      <h1>not logged in</h1>
      <router-outlet>
      </router-outlet>
    </div>
    <div *ngIf="authenticated()">
      <h1>logged in</h1>
      <router-outlet>
      </router-outlet>
    </div>
angularangular2-routingangular2-template
8
Optimizal

Je voudrais dire s'il vous plaît utilisez un router-outlet nommé qui fonctionne parfaitement, mais le problème pour moi est que de telles URL ne sont pas du tout conviviales et je crois personnellement que les URL avec le nom du point de vente n'ont pas de sens,

ex:-

route

{ path : "forgotPassword", component :ForgotPassword , outlet : "notlogedin" }

sortie dans la barre d'adresse du navigateur

http: // localhost: 4200/(notlogedin: ForgotPassword)

voyez à quel point cela a l'air stupide dans la barre d'adresse.

par conséquent, si vous essayez d'utiliser *ngIf pour désactiver conditionnellement et activer router-outletpour résoudre le problème, cela ne fonctionne pas. Un router-outlet sera enregistré et quoi que vous fassiez, le prochain router-outlet ne répondra pas aux changements d'itinéraire.

Alors voici la solution

En utilisant ngTemplateOutlet et ng-template, nous pouvons fournir une bonne solution à ce problème en ne gardant qu'un seul router-outlet (voir l'exemple de code ci-dessous).

<ul>
  <li><a routerLink="/login">login</a></li>
  <li><a routerLink="/dashboard">dashboard</a></li>
</ul>

<!--This is where my before login router stays-->
<div class="logedIn-route" *ngIf="routerActive">
<ng-container *ngTemplateOutlet="template"></ng-container>
</div>

<!--This is where my after login router stays-->
<div class="logedout-route" *ngIf="!routerActive">
  <ng-container *ngTemplateOutlet="template"></ng-container>
</div>


<ng-template #template>
  <router-outlet>
  </router-outlet>
</ng-template>

Essayez le violon

https://jsfiddle.net/imal/e4tyqv95/36/

8
imal hasaranga perera

Vous devriez plutôt utiliser nommée router-outlet.

Il est indiqué dans la documentation: Un modèle peut contenir exactement un nom non nommé. 

<div *ngIf="authenticated() == false">
      <h1>not logged in</h1>
      <router-outlet name="notloggedin">
      </router-outlet>
    </div>
    <div *ngIf="authenticated()">
      <h1>logged in</h1>
      <router-outlet name="loggedin">
      </router-outlet>
    </div>

Le routeur ressemblera à:

{ path: 'page1', component: Page1Component, outlet: 'notloggedin' },
{ path: 'page2', component: Page2Component, outlet: 'loggedin' }

Ici un exemple de @yurzui dans ce post .

5
Edmar Miyake

Je devais utiliser ViewContainerRef pour que mobile et poste de travail tirent parti du même port de routeur:

<!-- MOBILE -->
<div *ngIf="isMobile">
  <div #mobileOutlet></div>
</div>

<!-- DESKTOP -->
<div *ngIf="!isMobile">
  <div #desktopOutlet></div>
</div>

<ng-template #tpl>
  <router-outlet></router-outlet> 
</ng-template>

Et je n’ai eu aucun problème à utiliser createEmbeddedView pour les deux:

@ViewChild('mobileOutlet', { read: ViewContainerRef }) _vcrMobile;
@ViewChild('desktopOutlet', { read: ViewContainerRef }) _vcrDesktop;
@ViewChild('tpl') tpl;

ngAfterViewInit() {
  if (this.isMobile) this._vcrDesktop.createEmbeddedView(this.tpl);
  else this._vcrMobile.createEmbeddedView(this.tpl);
}

la seule chose à faire est que vous devrez basculer cette prise si vous passez d'un point d'arrêt à un autre. Par exemple, du bureau au portable, redimensionnez:

this._vcrDesktop.clear();
this._vcrMobile.createEmbeddedView(this.tpl)
0
Nate May