Angulaire 2: Plusieurs fichiers de mise en page à l'aide de l'interpolation

Je suis en train de construire Angulaire à 2 app et ont besoin de deux fichiers de mise en page. Un pour les utilisateurs non connectés... (Login/Register points de vue, etc) et un pour les utilisateurs connectés à voir l'application elle-même. Comment cela peut-il être réalisé avec Angulaire 2?

Actuellement, j'ai un app.component.html qui n'a tout simplement

<main-navbar></main-navbar>
<router-outlet></router-outlet>

Mais ce que j'ai à faire est quelque chose le long des lignes de:

<div [ngSwitch]="layout">

  <template [ngSwitchCase]="panelLayout">
      /* output all the html layout elements for the logged out views */
      <router-outlet></router-outlet>
  <template>

  <template [ngSwitchCase]="appLayout">
     /* output all the html elements for the in logged in/app views */
     <router-outlet></router-outlet>
  </template>

</div>

Mais je n'ai aucune idée d'où ou comment mettre la layout variable.

Je suis en présumant que cette variable serait mieux placé à l'intérieur de la vue principale composante... ou est-il une meilleure façon de le faire?

Vous pouvez essayer ce Multiples de la disposition angulaire 2. Espérons que cela aide. Été utilisé pendant un certain temps maintenant, et s'adapte très bien, peu importe le nombre de mise en page de votre souhaitez utiliser dans votre application
Double Possible de Comment faire pour changer de présentation dans Angular2

OriginalL'auteur markstewie | 2016-08-03

  1. 2

    J'ai travaillé sur ce que je cherche à réaliser en utilisant transclusion... aussi loin que je peux voir ce qui n'est pas mentionné nulle part dans les docs officielles!

    Simplement, il s'agit de l'utilisation de <ng-content></ng-content> dans les fichiers de mise en page où le contenu principal de chaque disposition doit aller. 

    //eg: app-layout.html
<app-header></app-header>
<app-navbar></app-navbar>
//content using this layout will appear below
<ng-content></ng-content>
<app-footer></app-footer>

    Puis après l'importation et y compris dans les directives d'utilisation de la mise en page en vue comme

    //eg: dashboard.html
<app-layout>
  <h1>Hello {{user}}!</h1>
</app-layout>

    Espère que cela aide quelqu'un en train de réaliser la même chose

    L'homme désolé, mais ce n'est absolument pas évident à comprendre. L'exemple se sent inachevé.

    OriginalL'auteur markstewie

  2. 1

    Je vous recommande de changer votre point de vue avec des itinéraires différents, c'est à dire, une voie pour les utilisateurs qui correspond à un component A et un autre itinéraire pour les utilisateurs qui ne sont pas connectés qui se résout component B.

    Je préfère utiliser cette stratégie parce que vous pouvez empêcher les utilisateurs de niveau de la route à l'aide de la CanActivate crochet, c'est à dire, avant d'aller à un particulier de l'itinéraire, il y a une validation. Si c'est faux, l'utilisateur ne sera pas accès à cette route. Si c'est vrai, la route est activée.

    Vous pouvez lire l'impressionnante documentation sur la façon d'utiliser le CanActivate ici dans le Routage & Navigation: CanActivate Garde de la documentation.

    Espère que cela aide.

    Je suis déjà à l'aide de la CanActivate garde méthode pour rediriger les utilisateurs de la /login route si pas connecté, mais je veux savoir comment créer réutilisables mise en page des fichiers qui sont utilisés pour de multiples itinéraires en fonction de la voie/la vue de composant est actif.
    Si j'ai le point, vous voulez utiliser le même fichier html avec les différents composants qui sont représentés dans des voies différentes?
    Oui, c'est vrai. Ainsi, le "déconnecté" de mise en page serait tout simplement d'afficher un logo et puis le imbriqués l'itinéraire affichage d'un formulaire de connexion ou le formulaire d'inscription et le "enregistré dans/app" disposition aurait l'application principale de navigation et afficher le contenu de chaque application itinéraire à l'intérieur de cette... l'espoir qui fait sens?
    À mon avis c'est mieux de séparer les préoccupations, je. e., création d'un composant et d'un itinéraire de traiter avec le signe et le processus d'enregistrement et un autre composant et de la route de traiter avec de l'utilisateur connecté en application. Et ici, nous utilisons ce que j'ai suggéré à propos de la pouvez activer la garde qui vous dit que vous êtes en utilisant. Cette garde n'est utilisé que dans la authentifié routes. De se séparer de cette manière est beaucoup plus facile de maintenir une grande application.
    Ok, je reçois ce que vous dites maintenant, je pense... il y a donc deux composantes principales et chacune aurait imbriquée itinéraires... droit?

    OriginalL'auteur Bernardo Pacheco

  3. 0

    Juste injecter un service partagé qui fournit le courant loggedIn état du composant.

    @Injectable()
class AuthService {
  isLoggedIn = new BehaviorSubject(false);

  ...      
}

    bootstrap(AppComponent, [..., AuthService]);

    @Component({
  template: `
<div [ngSwitch]="authService.isLoggedIn | async">

  <template [ngSwitchCase]="false">
      /* output all the html layout elements for the logged out views */
      <router-outlet></router-outlet>
  <template>

  <template [ngSwitchCase]="false">
     /* output all the html elements for the in logged in/app views */
     <router-outlet></router-outlet>
  </template>

</div>
`
})
class MyComponent {
  constructor(private authService:AuthService) {};
}

    Voir aussi Faire une requête AJAX avant d'amorçage Angular2 application

    Je vous remercie de votre réponse qui ne manquera pas de travail, mais pour la taille de l'application que je suis en train de construire à l'aide de la <ng-contenu> transclusion sous la forme de plusieurs fichiers de mise en page comme décrit ci-dessus est ma solution préférée car elle maintient les choses séparées et bien rangé et à l'aide d'un garde pour protéger les routes.
    Est-ce la meilleure approuch à gérer de multiples mises en page dans angulaire 2? Comme une page de connexion avec une simple mise en page et les autres pages avec d'autres mise en page
    Vous pouvez utiliser le routeur pour montrer les différents points de vue. C'est juste pour afficher un seul composant de diverses manières.
    Dans mon application.composant, j'ai un <header-component><header-component><routeur-outlet></routeur-outlet> lorsque je navigue à la connexion je veux me débarrasser de la <header-component> mais pour toutes les autres pages lorsque l'utilisateur est connecté, je veux juste afficher la mise en page telle qu'elle est. Dois-je utiliser ng-si avec un service à obtenir cela? Quelle est la meilleure façon? Avez-vous un lien ou quelque chose pour m'aider j'ai coincé sur cela pendant des jours.
    *ngIf et un service de sons pour ce cas d'utilisation

    OriginalL'auteur Günter Zöchbauer