组件视图上的意外指令值'undefined'AboutComponent

Question

您好我试图将ng2-fullpage整合到我的anguar2应用程序中。每当我试图将指令[MnFullpageDirective]插入到组件中时，它就会显示上述错误

有问题指令的组件

import { Component, OnInit } from '@angular/core';
import { MnFullpageDirective } from 'ng2-fullpage';
import { AllPraniComponent } from './prani+room/allPrani.component';
import { HeaderComponent } from './header.component';

@Component({
    selector: 'praniCool-about',
    template: `<div mnFullpage [mnFullpageNavigation]="true">
                  <div id="section1" class="section fp-section fp-table">
                      <praniCool-header></praniCool-header>
                  </div>
                  <div id="section2" class="section fp-section fp-table">
                      <praniAndroom></praniAndroom>
                  </div>
              </div>`,
    directives: [MnFullpageDirective, HeaderComponent, AllPraniComponent]
})

export class AboutComponent implements OnInit {}

pranicool-header组件

import { Component, ElementRef, OnInit } from '@angular/core';
@Component({
    selector: 'praniCool-header',
    templateUrl: 'app/header.component.html'
})

export class HeaderComponent implements OnInit{}

header.component.html

<div class="header col-xs-12" >
  <div class="text-center vertical-center">
     <span id="p">p</span>
     <span id="r">r</span>
     <span id="a">a</span>
     <span id="n">n</span>
     <span id="i">i</span>
     <span id="c">C</span>
     <span id="o1">O</span>
     <span id="o2">O</span>
     <span id="l">L</span>
   </div>
</div>

prani和房间组件

与标题

相同的静态内容

完整错误日志

EXCEPTION：错误：未捕获（在承诺中）：组件“AboutComponent”视图上的意外指令值“undefined”

EXCEPTION：错误：未捕获（在承诺中）：组件“AboutComponent”视图上的意外指令值“undefined”

堆栈跟踪： 错误：未捕获（在承诺中）：组件“AboutComponent”视图上的意外指令值“未定义”     at resolvePromise（zone.js：538）     在zone.js：515     在ZoneDelegate.invoke（zone.js：323）     at Object.onInvoke（core.umd.js：6075）     在ZoneDelegate.invoke（zone.js：322）     在Zone.run（zone.js：216）     在zone.js：571     在ZoneDelegate.invokeTask（zone.js：356）     at Object.onInvokeTask（core.umd.js：6066）     在ZoneDelegate.invokeTask（zone.js：355）

未处理的Promise拒绝：组件'AboutComponent'视图上的意外指令值'undefined';区域：角;任务：Promise.then;值：BaseException $ 1 {message：“组件'MainComponent'视图上的意外指令值'undefined'”，堆栈：“错误：t ...上的意外指令值'undefined'：st / 3000 / node_modules / zone.js / dist / zone.js：216：44）“}消息：组件视图'AboutComponent'上的意外指令值'undefined'”stack：“错误：组件'AboutComponent'↵视图上的意外指令值'undefined' BaseException $ 1（http://localhost:3000/node_modules/@angular/compiler/compiler.umd.js:912:27）↵在CompileMetadataResolver.getViewDirectivesMetadata（http://localhost:3000/node_modules/@angular/compiler/compiler.umd.js:10979:27）↵在eval（http://localhost:3000/node_modules/@angular/compiler/compiler.umd.js:13022:67）↵在Array.forEach（native）↵在RuntimeCompiler._compileComponent（http://localhost:3000/node_modules/@angular/compiler/compiler.umd.js:13019:40 ）↵atval（http://localhost:3000/node_modules/@angular/compiler/compiler.umd.js:13009:53）↵在ZoneDelegate.invoke（http://localhost:3000/node_modules/zone.js/dist/zone.js:323:29）↵在Object.onInvoke（http://localhost:3000/node_modules/@angular/core/core.umd.js:6075:45）↵在ZoneDelegate.invoke（http://localhost:3000/node_modules/zone.js/dist/zone.js:322:35）↵在Zone .run（http://localhost:3000/node_modules/zone.js/dist/zone.js:216:44）“ proto ：错误 错误：未捕获（在承诺中）：组件视图'AboutComponent'（...）上的意外指令值'undefined'

Systemjs.config.js

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs',
    'ng2-fullpage':               'node_modules/ng2-fullpage'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  };
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

更新

我有12个组件，如下所示。

import { Component, ElementRef, OnInit } from '@angular/core';
import { Router } from '@angular/router-deprecated';

@Component({
  selector: 'biha',
  templateUrl: 'app/svg/Biha.svg'
})

export class BihaComponent implements OnInit {
     talkTalk:TimelineMax;

     constructor(private router: Router, private elementRef: ElementRef){
           setInterval(() => { this.clicked(); }, 1000*6 );
     }
     ngOnInit(){
            this.group = this.elementRef.nativeElement;

            this.earRight = this.group.querySelectorAll("#earRight");
            this.earLeft = this.group.querySelectorAll("#earLeft");

            this.talkTalk = new TimelineMax({
              paused: true
            });

            this.talkTalk
                .to(this.mouthOpen, 0, { visibility:"visible"})
                .to(this.mouthOpen, 0.2, { scaleY:0.9})
                .to(this.mouthOpen, 0.2, { scaleY:1})
                .to(this.mouthOpen, 0.5, { scaleY:0.9})
                .to(this.mouthOpen, 0.1, { scaleY:1})
                .to(this.mouthOpen, 0.1, { opacity:0})
                .to(this.smile, 0.3, { opacity:1});
   }
  }

他们会加入allPraniComponent

import { Component } from '@angular/core';

import { Router } from '@angular/router-deprecated';

import { BihaComponent } from '../single-components/biha.component';
import other components (like BihaComponent);

@Component({
  selector:'praniAndroom',
  directives: [BihaComponent, ...(other components)],
  templateUrl: 'app/prani+room/allPrani.component.html'
})

export class AllPraniComponent {
  constructor(private router: Router) {
  }
}

allPraniComponent.html

<div id="container">
    <div class="box">
        <div class="boxInner>
            <biha class="prani"></biha>
        </div>
    </div>
    <div class="box">
        <div class="boxInner>
           other components get added up like this
        </div>
    </div>      
</div>