0
我試圖在angular2上使用golden-layout。我跟着這plunker，但我得到以下錯誤：屬性'registerComponent'在類型'ElementRef'上不存在
Property'registerComponent'不存在類型'ElementRef'上。
屬性'eventHub'在類型'ElementRef'上不存在。
Property'init'類型'ElementRef'上不存在。
屬性'on'在類型'ElementRef'上做了notexist。
屬性'updateSize'在類型'ElementRef'上不存在。
住宅 'eventHub' 不上類型存在 'ElementRef'
的一屁股的代碼如下：
import {
Component, ComponentFactoryResolver, HostListener, ComponentFactory, ComponentRef,ViewContainerRef,ReflectiveInjector,
ElementRef, ViewChild
} from '@angular/core';
import {AppComponent} from './app.component';
import {App2Component} from './app2.component';
declare let GoldenLayout: any;
@Component({
selector: 'golden-layout',
template: `<div style="width:100%;height:500px;" id="layout" #layout>My First Angular 2 App</div>
<br/><button (click)="sendEvent()">Send event through hub</button>`,
entryComponents: [AppComponent, App2Component]
})
export class GLComponent {
@ViewChild('layout') private layout: ElementRef;
private config: any;
private layout: ElementRef;
constructor(private el: ElementRef, private viewContainer: ViewContainerRef,
private componentFactoryResolver: ComponentFactoryResolver){
this.config = {
content: [{
type: 'row',
content: [{
type: 'component',
componentName: 'test1',
componentState: {
message:"Top Left"
}
}, {
type: 'column',
content: [{
type: 'component',
componentName: 'test2',
componentState: {
message:"Top Right"
}
}, {
type: 'component',
componentName: 'test1',
componentState: {
message:"Bottom Right"
}
}]
}]
}]
};
}
ngAfterViewInit(){
this.layout = new GoldenLayout(this.config, this.layout.nativeElement);
this.layout.registerComponent('test1', (container, componentState) => {
let factory = this.componentFactoryResolver.resolveComponentFactory(AppComponent);
let compRef = this.viewContainer.createComponent(factory);
compRef.instance.setEventHub(this.layout.eventHub);
compRef.instance.message = componentState.message;
container.getElement().append(compRef.location.nativeElement);
container["compRef"] = compRef;
compRef.changeDetectorRef.detectChanges();
});
this.layout.registerComponent('test2', (container, componentState) => {
let factory = this.componentFactoryResolver.resolveComponentFactory(App2Component);
let compRef = this.viewContainer.createComponent(factory);
compRef.instance.setEventHub(this.layout.eventHub);
compRef.instance.message = componentState.message;
container.getElement().append(compRef.location.nativeElement);
container["compRef"] = compRef;
compRef.changeDetectorRef.detectChanges();
});
this.layout.init();
this.layout.on("itemDestroyed", item => {
if (item.container != null) {
let compRef = item.container["compRef"];
if (compRef != null) {
compRef.destroy();
}
}
});
}
@HostListener('window:resize', ['$event'])
onResize(event) {
if (this.layout)
this.layout.updateSize();
}
sendEvent(){
if (this.layout)
this.layout.eventHub.emit("someEvent");
}
}
編輯：
我加入GitHub的鏈接到我項目，包含所有配置文件和組件：golden-layout-demo。
解決方案：
的plunker的代碼是不正確的，使用this.layout.nativeElement.registerComponent代替this.layout.registerComponent和同爲相同的，如果爲eventHub, init, on, updateSize。這解決了編譯時錯誤。
EDIT2：
現在，我正在運行時錯誤，我可以在我的瀏覽器中看到：
GET http://localhost:4200/styles.css
GET http://localhost:4200/systemjs.config.js
GET http://localhost:4200/systemjs.config.js
Uncaught Error: Zone already loaded.
GET http://localhost:4200/app 404 (Not Found)
GLComponent_Host.html:1 ERROR TypeError: Cannot read property 'registerComponent' of undefined
我的索引文件的內容是這樣的：
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link type="text/css" rel="stylesheet" href="https://golden-layout.com/files/latest/css/goldenlayout-base.css" />
<link type="text/css" rel="stylesheet" href="https://golden-layout.com/files/latest/css/goldenlayout-dark-theme.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://golden-layout.com/files/latest/js/goldenlayout.min.js"></script>
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/[email protected]?main=browser"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
// System.import('app').catch(function(err){ console.error(err); });
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<golden-layout>Loading...</golden-layout>
</body>
</html>
您使用的是完全相同的代碼作爲Plunker的
systemjs.config.js文件？ –是的。我也發佈了代碼。 –
所以問題是關於同一代碼在Plunker中的作用，而不是在您的本地機器上？ –