Золотая раскладка с Angular 6 с использованием машинописи?
Я использую золотой макет с Angular 6, следуя этому уроку.
Я получаю сообщение об ошибке 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 { }
2 ответа
Мне удалось настроить золотой макет для работы с Angular 6, преобразовав файл javascript из примера золотого макета в машинописный текст. Я включил мои угловые 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" />
config
должен быть типа GoldenLayoutConfiguration
, Похоже эта строчка
let config = {
это ваша проблема. Попробуй это:
let config:GoldenLayoutConfiguration = {
Документация говорит это:
myLayout = new GoldenLayout({
content:[{
type: 'component',
componentName: 'sayHi',
componentState: { name: 'Wolfram' }
}]
});
так что это то, что вы можете попробовать.