Angular 类型“ElementRef”上不存在属性“registerComponent”_Angular_Golden Layout

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

angular

Angular 类型“ElementRef”上不存在属性“registerComponent”,angular,golden-layout,Angular,Golden Layout,我试着和angular2一起制作黄金版式。我遵循了这一点，但出现了以下错误：类型“ElementRef”上不存在属性“registerComponent” 类型“ElementRef”上不存在属性“eventHub” 类型“ElementRef”上不存在属性“init” 属性“on”在类型“ElementRef”上不存在类型“ElementRef”上不存在属性“updateSize” 类型上不存在属性“eventHub” “ElementRef” 公司代码如下： import { Com

我试着和angular2一起制作黄金版式。我遵循了这一点，但出现了以下错误：

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

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

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

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

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

类型上不存在属性“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");
  }
}

我的索引文件的内容如下所示：

<!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>

plunk中的代码没有错误，将this.layout.registerComponent更改为this.layout.nativeElement.registerComponent只是隐藏了问题，一旦应用程序能够实际构建，就会导致更多问题

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

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

您使用的代码与Plunker完全相同吗？是的。我也发布了代码。所以问题是，相同的代码在Plunker中起作用，但在您的本地机器上不起作用？是的，我对angular完全陌生，无法解决问题，Plunke中的代码像fab一样工作，但在我的本地机器上失败。首先，请将您的index.html修改得非常好。让我检查一下。谢谢你花时间回答这个问题，让我知道我做错了。我会应用你的建议，看看是否有效+答案是1。

<!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>