使用typescript的角度为6的金色布局？

我用的是角6，跟在后面

我在

GoldenLayoutModule.forRoot（config）

配置不可分配给类型为

GoldenLayoutConfiguration

的参数

---

config

的类型必须是

GoldenLayoutConfiguration

。看起来像这条线

let config = {

这是你的问题。试试这个：

let config:GoldenLayoutConfiguration = {

---

报告说：

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

---

因此，您还可以尝试其他方法。

通过将的javascript文件转换为typescript，我可以使用Angular 6获得golden layout。我在本例中包含了我的angular 6文件，以便其他人可以从一个完整的工作示例开始，以节省我花费的时间。我不知道为什么ng6黄金布局不起作用，因为它应该与Angular 6兼容，但无法获得布局配置语法，也无法在我的搜索中找到任何完整的工作示例

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

npm install --save golden-layout@1.5.9 jquery

与Angular 6兼容的文件如下：

应用程序模块.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 { }

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();
    }
}

应用程序组件.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 { }

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();
    }
}

从'@angular/core'导入{Component}；
从“黄金版式”导入*作为黄金版式；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
myLayout:GoldenLayout；
标题='popout ex'；
配置：任意={
内容：[{
键入：“行”，
内容：[
{
类型：'component'，
组件名称：“示例”，
组件状态：{text:'Component 1'}
},
{
类型：'component'，
组件名称：“示例”，
组件状态：{text:'Component 2'}
},
{
类型：'component'，
组件名称：“示例”，
组件状态：{text:'Component 3'}
}
]
}]
};
恩戈尼尼特（）{
this.myLayout=新的GoldenLayout（this.config）；
this.myLayout.registerComponent（'example'，函数（容器，状态）{
container.getElement（）.html（“”+state.text+“”）；
});
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" />

欢迎来到堆栈溢出。在提出问题之前，你做的研究越多，回答问题的可能性就越大。您应该发布您尝试过的东西，可能包括代码的“工作”沙盒。此外，你的教程链接也被破坏了——可能是付费访问或其他什么。不管怎样，没有人会知道你指的是什么。就您的问题而言，问题是

config

类型错误。它需要是

GoldenLayoutConfiguration

，但似乎不是那种类型。它是什么类型的？一个功能齐全的Angular-6 golden layout的实现可以在我希望的地方找到，我早就知道。。。