Question

我刚刚开始使用angular2，我正面临一些情况来组织我的逻辑。我实际上正在重构backend theme，它由两个主要组件组成，即应该出现在页面加载上的login view和出现在成功登录时出现的main dashboard。我对main dashboard模板没有任何问题，因为我已经重构了所有代码，它的工作正常。然而，主要问题在于login模块，因为dashboard由sidebar，header和maincontent区域组成。我真正的问题是如何在加载登录页面时排除sidebar，header，登录页面将成为我的应用程序的起点。更准确地说，我可以使用与login module无关的dashboard module布局吗？这是我当前的仪表板代码。我真的很感激，如果有人能帮助我以适当的方式构建这个应用程序。

P.S我使用node作为后端

index.html

<html>
  <head>
    <title>Angular 2 QuickStart</title>


    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <base  href="/">
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app/main').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <parent>
       Loading...
    </parent>

    <!-- START SCRIPTS -->
        <!-- START PLUGINS -->

  </body>
</html>

app.component.ts

import { Component, NgZone } from '@angular/core';
import { HeaderComponent } from './header/header.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { AuthComponent } from './auth/auth.component';
import { ListComponent } from './blogs/list.component';
import {RouteConfig, ROUTER_DIRECTIVES, Router, AuxRoute} from '@angular/router-deprecated';

@Component({
  selector: 'parent',
  templateUrl:'app/main.html',
  directives: [ROUTER_DIRECTIVES, HeaderComponent, SidebarComponent, AuthComponent]
})


@RouteConfig([
        { path: '/list', name: 'BlogList', component: ListComponent}

])


export class AppComponent { 
     constructor(private _router: Router , private _zone:NgZone){}
}

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import {ROUTER_PROVIDERS} from '@angular/router-deprecated';
bootstrap(AppComponent,[ROUTER_PROVIDERS]);
import {NgZone, enableProdMode} from '@angular/core'

main.html

<div class="page-container">
    <div class="page-sidebar">
        <mysidebar>
        </mysidebar>
    </div>
    <div class="page-content">
        <myheader>
        </myheader>
        <!-- PAGE CONTENT WRAPPER -->
        <div class="page-content-wrap">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

Answer 1

您可以使用Service

来完成此操作

export class AppComponentService {

    public showSidebar : boolean = true;
    public showHeader : boolean = true; 

}

如果您在bootstrap期间添加此服务：

bootstrap(AppComponent,[ROUTER_PROVIDERS, AppComponentService ]);

您可以将其注入AppComponent：

export class AppComponent { 
     constructor(
          private _router: Router, 
          private _zone:NgZone, 
          private _appService: AppComponentService
     ){}
}

将模板更改为：

<div class="page-container">
    <div class="page-sidebar">
        <mysidebar *ngIf="_appService.showSidebar">
        </mysidebar>
    </div>
    <div class="page-content">
        <myheader *ngIf="_appService.showHeader">
        </myheader>
        <!-- PAGE CONTENT WRAPPER -->
        <div class="page-content-wrap">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

在LoginComponent内，您可以注入相同的单身人士服务，并在routerOnActivate和routerOnDeactivate上播放：

export class LoginComponent {

    constructor(private _appService: AppComponentService){}

    routerOnActivate() : void {
        this._appService.showSidebar = false;
        this._appService.showHeader = false;
    }

    routerOnDeactivate() : void {
        this._appService.showSidebar = true;
        this._appService.showHeader = true;
    }
}

在angular2中渲染不同的模板

1 个答案: