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组件初始化后运行。

从不同目录导入Angualr2组件

1 个答案: