Импорт Angualr2 Компонент из другого каталога

Question

Учитывая приведенную ниже структуру папок, я пытаюсь импортировать app.overlay.component.ts в мой tracker.component.ts, используя @ViewChild. WebStorm в порядке с файлом путь, но когда я запускаю приложение в браузере, я получаю сообщение об ошибке, что он не может найти метод 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

ПРИМЕЧАНИЕ Забудьте о 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

Я думаю, что вы должны использовать ngAfterViewInit(), а не ngOnInit(), потому что он запускается после инициализации компонентов viewchild.