如何在Angular 4中导入自定义模块?

时间:2017-08-10 20:33:51

标签: javascript angular module

我正在尝试使用我构建的一个自定义模块并将其放在另一个模块中

自定义模块:

MY-test.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { MyTestComponent } from './my-test.component';

@NgModule({
  declarations: [
    MyTestComponent    
  ],
  imports: [
    CommonModule,    
  ],  
  exports: [ MyTestComponent]
})
export class MyTestModule { }

我需要提供的另一个模块

MY-parent.module.ts

import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';

import { MyParentComponent } from './my-parent.component';
import { MyTestModule } from '../my-test/my-test.module';

@NgModule({
    'imports': [
        CommonModule,
        MyTestModule        
    ],
    'declarations': [
        MyParentComponent
    ],    
    'exports': [
        MyParentComponent
    ]   
})

export class MyParentModule {}

MY-parent.component.ts

import { Component, Inject, Injectable, OnInit  } from '@angular/core';
import { MyTestComponent } from '../my-test/my-test.component'

@Component({
    'selector': 'my-parent',
    'template': `
       test
    `
})

@Injectable()

export class MyParentComponent implements OnInit {    
    public myTestComponent: MyTestComponent;
    constructor() {}

    ngOnInit() {
       console.log(this.myTestComponent)  <----show undefined here.
    }    
}

我不确定如何将my-test组件导入my-parent组件。 我究竟做错了什么?非常感谢!

更新

略微改变我上面的代码以适应我的情况。它在开头是MytestComponentthis.myTestComponent表示未定义。

1 个答案:

答案 0 :(得分:1)

1-在my-parent.component.html中添加<test component selector> </ test component selector #test>

2-在父ts文件中添加:

@ViewChild('test') test: MyTestComponent;

然后您将能够访问MyTestComponent

中的所有方法和参数