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中的作用，而不是在您的本地机器上？ –