使用TypeScript和Angular 6的Golden Layout？

Question

我正在使用Angular 6与golden layout，遵循this tutorial。

在GoldenLayoutModule.forRoot(config)上出现错误。

config不能分配给类型为GoldenLayoutConfiguration的参数。

import { AppComponent } from './app.component';
import { GoldenLayoutModule, GoldenLayoutConfiguration } from '@embedded-enterprises/ng6-golden-layout';
import * as $ from 'jquery';

// It is required to have JQuery as global in the window object.
window['$'] = $;

// const config: GoldenLayoutConfiguration { /* TODO */ };


let config = {
  content: [{
      type: 'row',
      content:[{
          type: 'component',
          componentName: 'testComponent',
          componentState: { label: 'A' }
      },{
          type: 'column',
          content:[{
              type: 'component',
              componentName: 'testComponent',
              componentState: { label: 'B' }
          },{
              type: 'component',
              componentName: 'testComponent',
              componentState: { label: 'C' }
          }]
      }]
  }]
};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoldenLayoutModule.forRoot(config)
  ],
  entryComponents: [
    // TODO Add your components which are used as panels in golden-layout also here.
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

- gbarry

---

欢迎来到Stack Overflow。在提问之前，您进行的研究越多，问题得到解答的可能性就越大。您应该发布您尝试过的内容，可能包括代码的“工作”沙盒。此外，您的教程链接已经失效 - 可能是付费访问或其他原因。无论如何，其他人都不会知道您在引用什么。至于您的问题，问题在于config是错误的类型。它需要是GoldenLayoutConfiguration，但似乎不是这种类型。它是什么类型？ - Travis Heeter

完全功能的Angular-6 golden-layout实现可以在https://github.com/EmbeddedEnterprises/ng6-golden-layout找到。我希望我早点知道这个... - B--rian

Answer 1

我通过将golden-layout示例的javascript文件转换为typescript，成功地将golden-layout与Angular 6配合使用。我包含了这个示例的Angular 6文件，以便其他人可以从一个完整的工作示例开始，节省他们的时间。我不确定为什么ng6-golden-layout不能正常工作，因为它应该兼容Angular 6，但我无法获取布局配置语法，并且在搜索中找不到任何完整的工作示例。

首先，必须安装一个软件包：

npm install --save golden-layout@1.5.9 jquery

兼容 Angular 6 的文件如下:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import * as $ from 'jquery';

// It is required to have JQuery as global in the window object.
window['$'] = $;

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  entryComponents: [
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import * as GoldenLayout from 'golden-layout';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myLayout: GoldenLayout;
  title = 'popout-ex';

  config:any = {
    content: [{
      type: 'row',
      content: [
          {
          type:'component',
          componentName: 'example',
          componentState: { text: 'Component 1' }
          },
        {
          type:'component',
          componentName: 'example',
          componentState: { text: 'Component 2' }
          },
        {
          type:'component',
          componentName: 'example',
          componentState: { text: 'Component 3' }
          }
      ]
    }]
  };

  ngOnInit() {
      this.myLayout = new GoldenLayout( this.config );

      this.myLayout.registerComponent( 'example', function( container, state ){
        container.getElement().html( '<h2>' + state.text + '</h2>');
      });

      this.myLayout.init();
    }
}

app.component.html

 <link type="text/css" rel="stylesheet" href="//golden-layout.com/assets/css/goldenlayout-base.css" />
 <link type="text/css" rel="stylesheet" href="//golden-layout.com/assets/css/goldenlayout-dark-theme.css" />

- gbarry

Answer 2

config 需要是 GoldenLayoutConfiguration 类型。看起来是这行

let config = {

这是您的问题。请尝试这样做：

let config:GoldenLayoutConfiguration = {

---

这份文档说：

myLayout = new GoldenLayout({
  content:[{ 
    type: 'component', 
    componentName: 'sayHi',
    componentState: { name: 'Wolfram' }
  }]
});

那是你可以尝试的另一件事。

- Travis Heeter