Angular中使用Golden-layou布局

Posted 2023-03-23

参考技术A Golden-layout官网
项目中需要使用到多页面布局，采用的技术是Golden-layout，项目使用的框架是angular2+，在此记录一下搬砖过程和步骤：

项目需求是这样子：
项目调度模块中有很多组件，但是需要组件显示在一个页面，可以同时存在，像浏览器可以打开多个页面一样，呃，暂时不知道这个叫什么，后期更正，废话不多说。

我有两个组件，当第一次加载时显示welcome组件，如图：

导入Golden-layout和组件，因为需求我将组件打包数组

实例化

点击时添加组件

这里说一下ng的 ViewContainerRef 和 ComponentFactoryResolver
ComponentFactoryResolver：用程序生动态成一个组件
ViewContainerRef：将一个组件插入到当前组件的兄弟位置

jquery 和 bootstrap 导航栏在 Angular 7 中折叠或展开子菜单的布局中不起作用

【中文标题】jquery 和 bootstrap 导航栏在 Angular 7 中折叠或展开子菜单的布局中不起作用

【英文标题】：jquery and bootstrap navbar does not working in layout for collapsing or expanding submenu in angular 7

【发布时间】：2020-01-11 17:00:31

【问题描述】：

我在使用引导导航栏折叠和展开 Angular 7 布局中的子菜单时遇到了一个大问题

我为我的网站创建了两个布局，一个用于仪表板布局，另一个用于登录部分。 我为仪表板使用引导模板。为了在我的项目中使用两个布局，我为每个部分创建了组件（一个用于仪表板，另一个用于登录），带有 layout.routing 和 layout.module 文件，用于处理项目中的所有布局页面，例如下图：

在这种情况下，当我看到我的仪表板时，所有子菜单都已展开，并且 a 标签 中的 href="#" 具有路由行为而不是折叠子菜单菜单。 请看第二张图。

当我将仪表板 html 代码粘贴到 app.component.html 中时，这是可行的，当页面加载时，子菜单会折叠，当我单击 fa-arrow 图标时，图标会起作用并且子菜单会展开。如下图所示

然后

这里，这是我的dashboardLayoutComponent.ts

import  Component, OnInit  from '@angular/core';

@Component(
selector: 'app-dashboard-layout',
templateUrl: './dashboard-layout.component.html',
styleUrls: ['./dashboard-layout.component.css']
)
export class DashboardLayoutComponent implements OnInit 
constructor()  
ngOnInit()  

这个截图是针对 layout.routing.module 的

我应该怎么做才能解决这个问题。 请给我建议并说出您的建议。 谢谢。

【问题讨论】：

仅供参考，不要同时使用 Jquery 和 Angular

使用 ng-bootstrap 或 ngx-bootstrap 或 md-bootstrap 来获得适合 Angular 的非 jQuery 导航

我尝试使用 ng-bootstarp 而不是 bootstrap，但它不起作用。阿克伯伊克巴尔

你对 FYI 是什么意思？请解释。 @PatricioVargas

供您参考

【参考方案1】：

我通过在 Agular 中使用延迟加载解决了我的问题。 毕竟我尝试了所有解决方案来解决我的问题，最后我找到了一个角度的延迟加载方法并使用了它。 如果我们为项目中的每个部分创建至少两个模块，并在该父组件的布局模块中配置所有组件模块，我们可以一起使用 Bootstrap、Jquery 和 Angular。 像下面的代码：

import  Routes, RouterModule  from '@angular/router';
import  DashboardLayoutComponent  from './dashboard-layout/dashboard-layout.component';
import  NgModule  from '@angular/core';

  const routes: Routes = [
  
    path: '',
    loadChildren: () => import('../login/login.module').then(m => m.LoginModule)
  ,
  
    path: 'login',
    loadChildren: () => import('../login/login.module').then(m => m.LoginModule)
  ,
  
    path: '',
    component: DashboardLayoutComponent,
    children: [
      
        path: 'dashboard',
        loadChildren: () => import('../adminDashboard/dashboard/dashboard.module').then(m => m.DashboardModule)
      ,
      
        path: 'get-all-product',
        loadChildren: () => import('../adminDashboard/get-all-products/get-all-product.module').then(m => m.GetAllProductModule)
      ,
]

@NgModule(
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
)

export class LayoutRoutingModule  

在这段代码中，我们有两个部分，第一个是登录布局，第二个是仪表板布局。