Question

正在开发一种角度应用程序，该应用程序的前端可以通过公共端和后端访问，并且是固定的。应用程序按预期工作但是我有一个关于如何为公共组件和管理组件使用单独资产的问题。

app.module.ts

@NgModule({
  imports: [
    BrowserModule
    ,AdminModule
    ,CMSModule
    ,routing
  ]
  ,declarations: [
    AppComponent
  ]
  ,bootstrap: [AppComponent]
  ,providers: [

  ]
})
export class AppModule { }

AdminModule - admin.component.ts使用styleUrls和encapsulation NONE

加载样式

CMSModule cms.component.ts也使用与上面完全相同的过程加载它自己的样式。

我注意到AdminModule和CMSModules组件css都已加载，这是有道理的，因为我告诉角度来加载模块，这些模块的组件加载样式encapsulation NONE

现在问题是，实际开发角色的CMS和管理应用程序的最佳方法是什么？它们应被视为两个独立的应用程序，配置在Web服务器路由到基于url的已部署应用程序，例如。

http://.../admin使用自己的index.html以及配置和路由e.t.c

加载管理员应用

http://.../使用自己的index.html以及配置和路由e.t.c加载cms app 或者这个用例使用一个app和一些angular / js魔法很容易解决，有没有人以前做过这个，你是如何解决这样一个用例而不会引起不必要的维护问题。

Answer 1

我最终使用jQuery来创建和角度服务来操作头标记，模块组件将负责执行此服务方法addStyles，因此样式可以直接注入每个模块的头部。可能更好的方法是这样做，但是现在对下面的实现感到满意。

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

declare var jQuery:any;

@Injectable()
export class DOMService{
  addStyles(styles:Array<string>):void{
    //remove all links from head that had been added by previous modules
    let head = jQuery("head");
    let styleElements = head.find( "[data-module-added]" );
    console.debug("current elements", styleElements)
    //add new styles passed to DOMService
    for( var i=0; i<styles.length; i++){
      let styleSheet =  styles[ i ];
      console.debug( "adding style %s", styleSheet );
      //FIXME: Maybe readfile contents and dump into head, might provide better functionality
      head.append("<link data-module-added rel='stylesheet' href='" + styleSheet + "'/>");
    }
  }
}

Angular2处理公共和管理应用程序，一个应用程序或多个应用程序的最佳方式

1 个答案: