異なるディレクトリからAngualr2コンポーネントをインポートする

Question

以下のフォルダ構造では、を使用してtracker.component.tsにapp.overlay.component.tsをインポートしようとしています。 WebStormはファイルパスでOKですが、ブラウザでアプリケーションを実行すると、showOverlayメソッドが見つからないというエラーが表示されます。私は自分のSystem.config.jsをいくつか調整する必要があることを読んでいるが、私が行っている変更はパスを解決していない。 system.config.jsを正しい方法で修正する場合は？私の理解は、使用してmoduleId: module.id相対パスを助けるが、私の理解が間違っていると思います。私はsystem.config.jsに基づいてこのスレッドを変更しました（How to Load multiple angular2 components from different folders in one index.html file?）

共有フォルダと同じレベルのコンポーネントで同じコードを使用してみましたが、すべてが期待通りに機能していたので、または

エラーTypeError: Cannot read property 'showOverlay' of undefined

NOTEはコンポーネントでjqueryのを忘れる必要な異なる構成があります。私はそれが間違っていることを知っているので、それは遠ざかります。ちょうど今のテスト目的のため。

root -public -app -ts -pages -tracker -tracker.component.ts -shared -app.overlay.component.ts

app.overlay.component.ts

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


@Component({ 

    selector: 'overlay-component', 
    templateUrl: '/public/app/templates/shared/overlay.component.html', 
    styleUrls: ['../../app/scss/shared/overlay.css'] 

}) 

export class OverlayComponent { 


    showOverlay() { 
     $('.overlay-component-container').show(); 
    } 

    hideOverlay() { 
     $('.overlay-component-container').hide(); 
    } 

} 

tracker.component.ts

import { Component, OnInit, ViewChild } from '@angular/core'; 
import { OverlayComponent } from "../../shared/app.overlay.component"; //WebStorm says this path is OK but is this.overlayComponent is undefined at runtime 


@Component({ 
    moduleId: module.id, 
    selector: 'beertracker-component', 
    templateUrl: '/public/app/templates/pages/tracker/tracker.component.html', 
    styleUrls: ['../../../scss/pages/tracker/tracker.css'] 
}) 

export class BeerTrackerComponent implements OnInit{ 


    @ViewChild(OverlayComponent) private overlayComponent: OverlayComponent; 

    ngOnInit(): void { 
     console.log(this.overlayComponent); 
     this.overlayComponent.showOverlay(); 
    } 
} 

System.config.js

(function (global) { 
    System.config({ 
     paths: { 
      // paths serve as alias 
      'npm:': 'node_modules/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 
      app: 'app', 
      // angular bundles 
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', 
      // other libraries 
      'rxjs':      'npm:rxjs', 
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' 
     }, 
     defaultJSExtensions: true, //manual add 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      app: { 
       main: '../public/app/ts/main.js', 
       defaultExtension: 'js' 
      }, 
      rxjs: { 
       defaultExtension: 'js' 
      }, 
      'shared': { 
       format: 'register', 
       defaultExtension: 'js' 
      } 
     } 
    }); 
})(this); 

Answer 1

ngOnInit（）ではなく、ngOnInit（）を使用する必要があると思うのは、ビューチャイルドコンポーネントが初期化された後に実行されるためです。