Question

我正在使用angular2版本2.4.7和节点6.9.5

我想要前面和管理员的单角度应用程序。例如http://localhost:port用于前端组件，模块和路由器。管理站点组件，模块和路由器http://localhost:port/admin。

我尝试了很多解决方案，但我找不到合适的解决方案。

以下是我目前正在使用的示例代码。

我的文件夹结构

src
  app
     admin
         components
         models
         services
         admin.component.html
         admin.component.ts
         admin.module.ts
         admin.routing.ts
         main.ts
     site             
         components
         models
         services
         app.component.html
         app.component.ts
         app.module.ts
         app.routing.ts
         main.ts
  assets
  environments
  index.html
  main.ts
  polyfills.ts
  systemjs.config.js
  tsconfig.json
  (other angular2 required files)

的src / main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/site/app.module';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

的src /应用/管理/ admin.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { FormsModule }    from '@angular/forms';
import { HttpModule } from '@angular/http';

// other required imports
import { MockBackend, MockConnection } from '@angular/http/testing';
import { BaseRequestOptions } from '@angular/http';

import { AdminComponent }  from './admin.component';
import { adminrouting }        from './admin.routing';

@NgModule({
    imports: [    
        CommonModule,
        adminrouting,
        HttpModule,
    ],
    declarations: [
        //declarations
    ],
    providers: [
        //providers
    ],
})

export class AdminModule { }

的src /应用/管理/ admin.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'adminapp',
    templateUrl: 'admin.component.html'
})

export class AdminComponent {}

的src /应用/管理/ admin.routing.ts

import { Routes, RouterModule } from '@angular/router';
//other impotrs

const appRoutes: Routes = [
    //my other routes
    // otherwise redirect to admin home
    { path: '**', redirectTo: '' }
];

export const adminrouting = RouterModule.forChild(appRoutes);

的src /应用/管理/ admin.component.html 和的的src /应用/网站/ admin.component.html

目前管理员和前台都是相同的。我希望两者都有所不同。

<!-- main app container -->
<div class="jumbotron">
    <div class="container">
        <div class="col-sm-8 col-sm-offset-2">                
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

的src /应用/管理/ main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AdminModule } from './admin.module';

platformBrowserDynamic().bootstrapModule(AdminModule);

的src /应用/网站/ app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app',
    templateUrl: 'app.component.html'
})

export class AppComponent { }

的src /应用/网站/ app.module.ts

// imports

@NgModule({
    imports: [
        BrowserModule,
        HttpModule,
        routing,
    ],
    declarations: [
        AppComponent,
        AdminComponent
        //other declarations
    ],
    providers: [
        //my providers
    ],
    bootstrap: [AppComponent, AdminComponent]
})

export class AppModule { }

的src /应用/网站/应用/ routing.ts

import { Routes, RouterModule } from '@angular/router';

const appRoutes: Routes = [
    //other routes
    {
      path: 'admin',
      loadChildren: '../admin/admin.module#AdminModule',
    },
    // otherwise redirect to home
    { path: '**', redirectTo: '' }
];

export const routing = RouterModule.forRoot(appRoutes);

的src /应用/网站/ main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

SRC / index.html中

<!DOCTYPE html>
<html>
<head>
    <base href="/" />
    <title>Angular 2 Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- bootstrap css -->

    <!-- application css -->

    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function (err) { console.error(err); });
    </script>
</head>
<body>
    <app>Loading...</app>
    <adminapp></adminapp>
</body>
</html>

我的这个结构正在运作。

但我的问题是，有没有任何解决方案，我可以使用admin.html作为http://localhost:port/admin的索引文件而不是index.html，现在这对于管理方和正面都是相同的。在我的index.html中，我有两个标签，这是我认为不好的做法。在这种情况下，两个组件都将加载到两个URL中。

<app></app>
<adminapp></adminapp>

任何人都可以建议我更好地解决这个问题。我不想为此制作两个不同的应用程序。

很抱歉在这里发布所有代码，而不是使用Plunker或其他任何代码。但我没有这种做法。

我在angular2中完全是新手。

由于

Answer 1

您可以使用CanLoad guard作为管理路由，并检查是否允许用户访问管理区域。如果没有，她甚至不会加载管理模块...

{
  path: 'admin',
  canLoad: [UserGuard],
  loadChildren: '../admin/admin.module#AdminModule',
},

Answer 2

你可以尝试这个，有2个html文件。并保留一个根组件，在该标签中添加一个属性来区分它是管理员还是其他login（），在根组件构造函数中，您可以使用ElementRef获取isAdmin属性值（我们不能使用@用于读取输入值的输入，因为浏览器有时并不认为根标签是有角度的，因为它没有完全加载。将此值保存在应用程序中使用的某些常用服务中，使用此值我们可以创建canActivate服务并将此canActivate附加到路由模块管理组件中。检查是否可以解决您的问题。

Angular 2两个索引或两个组件对于front和admin url不同

2 个答案: