问题描述
限时送ChatGPT账号..我正在使用 golden layout 和 Angular 6,遵循 本教程.
I am using golden layout with Angular 6, following this tutorial.
我在 GoldenLayoutModule.forRoot(config)
上遇到错误
config 不能分配给 GoldenLayoutConfiguration
类型的参数.
config not assignable to parameter of type
GoldenLayoutConfiguration
.
import { AppComponent } from './appponent';
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 { }
推荐答案
通过转换 黄金布局示例 到打字稿.我在这个示例中包含了我的 angular 6 文件,以便其他人可以从一个完整的工作示例开始,以节省我花费的时间.我不确定为什么 ng6-golden-layout 不起作用,因为它应该与 Angular 6 兼容,但无法获得布局配置语法,也无法在我的搜索中找到任何完整的工作示例.
I was able to get golden-layout to work with Angular 6 by converting the javascript file of the golden-layout example to typescript. I am including my angular 6 files for this example so that others can start with a full working example to save them the time I have spent. I am not sure why the ng6-golden-layout was not working as it should be compatible for Angular 6 but could not get the layout config syntax and could not find any full working examples in my searches.
首先,必须安装一个包:
First, a package has to be installed:
npm install --save golden-layout@1.5.9 jquery
与 Angular 6 兼容的文件如下:
The files compatible to Angular 6 are the following:
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './appponent';
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 { }
appponent.ts
import { Component } from '@angular/core';
import * as GoldenLayout from 'golden-layout';
@Component({
selector: 'app-root',
templateUrl: './appponent.html',
styleUrls: ['./appponent.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();
}
}
appponent.html
<link type="text/css" rel="stylesheet" href="//golden-layout/assets/css/goldenlayout-base.css" />
<link type="text/css" rel="stylesheet" href="//golden-layout/assets/css/goldenlayout-dark-theme.css" />
这篇关于使用打字稿的 Angular 6 黄金布局?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论