0

我正在尝试使用 angular2 进行黄金布局。我跟着这个plunker，但我得到了以下错误：

“ElementRef”类型上不存在属性“registerComponent”。

“ElementRef”类型上不存在属性“eventHub”。

类型“ElementRef”上不存在属性“init”。

类型“ElementRef”上不存在属性“on”。

“ElementRef”类型上不存在属性“updateSize”。

“ElementRef”类型上不存在属性“eventHub”

plunked的代码如下：

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相同的 for Same if for eventHub, init, on, updateSize。这解决了编译时错误。

编辑2：

现在，我收到了运行时错误，我可以在浏览器中看到：

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/zone.js@0.6.25?main=browser"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
    <script src="https://unpkg.com/systemjs@0.19.39/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>
4

1 回答 1

1

plunk中的代码并没有错，改成this.layout.registerComponent只是this.layout.nativeElement.registerComponent隐藏问题，一旦应用程序可以真正构建，会导致更多问题。

您的应用程序正在通过 Angular CLI 使用 webpack 运行，而 plunk 中的应用程序正在使用 SystemJS

当您尝试在您的应用程序中实现 plunk 时，您最终将两者合并，这导致了您的问题。您不需要index.html@yurzui 提到的加载库和配置 SystemJS 部分，您也不需要该systemjs.config.js文件

于 2017-05-15T14:47:33.727 回答