Angular js中多站点架构的多种布局答案

【问题标题】：multiple layouts for multi-site architecture in angular jsAngular js中多站点架构的多种布局
【发布时间】：2021-06-12 15:02:30
【问题描述】：

我们的 Angular 应用程序中有一个多站点架构，其中每个站点的域的基本 URL 都会发生变化。对于每个站点，我们需要包含页眉和页脚，并且每个站点的页眉和页脚中的 css 和链接都会更改。

如何在 Angular js 中动态包含与网站相关的标头 html 和 css？

【问题讨论】：

标签： css angularjs templates

【解决方案1】：

当我正确理解您的问题时，您应该将您的页眉、页脚 [..] 作为“私有”外部 Angular 模块导出。因此，您可以在每个新项目中重复使用它。

例如

项目 1

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
...
import { YourHeaderModule } from './your-header.module';

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    ...
    YourHeaderModule
    ],
  providers: [],
  bootstrap: [ AppComponent ]

})

export class AppModule { }

您可以像使用材质模块/组件一样使用它。

【讨论】：

没有多个项目。在同一个项目中可能有多个站点

【解决方案2】：

我用不同的方法两次解决了这个问题。

第一次：我根据正在加载的站点动态添加页眉和页脚组件并为每个站点加载自定义主题

第二次：我们将 Angular 应用程序移到了 laravel 应用程序中，并使用了 laravel 中的动态页眉和页脚。所以从角度应用程序中完全删除了这个要求。这很好用。

【讨论】：