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

问题描述 投票:7回答:2

我使用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 / app / admin / admin.component.html和src / app / site / 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中完全是新手。

谢谢

angular
2个回答
0
投票

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

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

0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.