Winkel 2: Mehrere layout-Dateien mit interpolation

Baue ich eine Eckige 2-app und die Notwendigkeit der zwei layout-Dateien. Eine für den ausgeloggten Benutzer... (Login/Register Ansichten etc) und eine für angemeldete Benutzer zu sehen, die eigentliche app selbst. Wie kann das erreicht werden mit dem Winkel 2?

Derzeit habe ich eine app.component.html, die hat einfach

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

Aber, was ich tun müssen, ist etwas entlang der Linien von:

<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>

Aber ich habe keine Ahnung, wo oder wie die layout variable.

Ich vermute diese variable wohl am besten in der main view-Komponente... oder gibt es einen besseren Weg, dies zu tun?

Sie können versuchen, diese Mehrere layout-im Winkel 2. Hoffe, es hilft. Verwende es für eine Weile jetzt, und es skaliert sehr gut, egal die Anzahl der Spalten verwenden möchten, in Ihrer app
Mögliche Duplikate von Wie wechseln von layouts in Angular2

InformationsquelleAutor markstewie | 2016-08-03

  1. 2

    Arbeitete ich aus, was ich versuchte zu erreichen durch die Verwendung von transklusion... soweit ich sehen kann, das ist nicht irgendwo erwähnt, in den offiziellen docs!

    Es ist einfach ein Fall von mit <ng-content></ng-content> im layout-Dateien, in denen die wichtigsten Inhalte für jedes layout muss gehen. 

    //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>

    Dann nach dem Import einschließlich von Richtlinien verwenden Sie das layout in einer Sicht, wie

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

    Hoffe, das hilft, dass jemand versucht, das gleiche zu erreichen

    Mann sorry, aber dies ist nicht völlig klar zu verstehen. Das Beispiel fühlt sich unvollendet.

    InformationsquelleAutor markstewie

  2. 1

    Empfehle ich Ihnen, schalten Sie Ihre anzeigen mit verschiedenen Routen, D. H., es wird eine route für den angemeldeten Benutzer, der aufgelöst wird, zu einem component A und eine andere route für Benutzer, die nicht eingeloggt, wird zu einem component B.

    Ich bevorzuge diese Strategie, denn Sie können verhindern, dass Benutzer in der route-Ebene mit der CanActivate Haken, d.h., bevor Sie sich zu einem bestimmten route, es gibt eine Bestätigung. Wenn es falsch ist-der Benutzer wird keinen Zugriff auf diese route. Wenn es wahr ist, die route ist aktiviert.

    Können Sie Lesen, die genial-Dokumentation über die Verwendung der CanActivate hier in der Routing & Navigation: CanActivate Guard Dokumentation.

    Hoffe, es hilft.

    Ich bin bereits über die CanActivate guard Methode zum umleiten von Benutzern an die /login route, wenn man nicht angemeldet aber ich möchte wissen, wie man erstellen Sie wiederverwendbare layout-Dateien, die verwendet werden, für mehrere Routen, die je nachdem, welche route/view-Komponente ist aktiv.
    Wenn ich habe die Stelle, möchten Sie verwenden die gleiche html-Datei mit verschiedenen Komponenten, die in den verschiedenen Strecken?
    Ja, das ist richtig. Also "abgemeldet" layout würde einfach zeigen das logo und dann die geschachtelten route anzeigen, dass entweder ein login-Formular oder das Anmeldeformular und die "protokolliert in/app" layout hätte der Haupt-app-navigation und zeigen Sie dann die Inhalte der jeweiligen app route innen... hoffe das macht Sinn?
    Meiner Meinung nach ist es besser, sich zu trennen die Bedenken, ich. e., eine Komponente erstellen und eine route zum Umgang mit dem anmelden und registrieren, der Prozess und die andere Komponente und die route zu bewältigen, die angemeldet app. Und wir nutzen hier das, was ich vorgeschlagen, über den guard aktivieren kann, dass Sie sagte, das Sie verwenden. Dieser Schutz ist nur im authentifizierten Routen. Die Trennung in dieser Weise ist viel einfacher, um eine große Anwendung.
    Ok, ich bekomme, was du jetzt sagst, denke ich... also es gibt zwei Haupt-Komponenten, und jede hätte verschachtelten Routen... richtig?

    InformationsquelleAutor Bernardo Pacheco

  3. 0

    Nur Spritzen, ein shared-service -, das bietet die aktuelle loggedIn status der Komponente.

    @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) {};
}

    Siehe auch Stellen Sie AJAX-request, bevor die bootstrapping-Anwendung Angular2

    Ich schätzen Sie Ihre Antwort, und das würde sicherlich funktionieren, aber für die Größe der app, die ich gerade Baue mit der <ng-Inhalte> transklusion in einzelnen layout-Dateien, wie oben beschrieben, ist meine bevorzugte Lösung, da es hält die Dinge trennen und sauber und mit einem guard zu schützen Routen.
    Dies ist die beste approuch, um mehrere layouts im Winkel 2? Wie eine login-Seite mit einem einfachen layout und die anderen Seiten mit anderen layout
    Sie können mit dem router zu zeigen verschiedenen Ansichten. Dies ist nur zu AUSLAGE legen Sie eine einzelne Komponente in verschiedenen Arten.
    In meiner app.Komponente habe ich dieses <header-Komponente><header-Komponente><router-outlet></router-outlet - > wenn ich navigieren Sie zu login-ich möchte, um loszuwerden, die <header-Komponente> aber für alle anderen Seiten, wenn der Benutzer angemeldet ist, ich will nur die Anzeige, das layout, wie es ist. Muss ich ng-wenn Sie mit einem service zu erreichen? Was ist der beste Weg? Hast du einen link oder etwas, das mir helfen ich habe hier auf dieser Tage.
    *ngIf und einem service klingt genau für diesen Anwendungsfall

    InformationsquelleAutor Günter Zöchbauer

Schreibe einen Kommentar