Angular2 CLI Angular-Meteor组件创建
问题描述:
我与Angular2 CLI和Meteor合作。 我注意到当我用Angular2 CLI生成一个组件时,如果我想将它包含在另一个模块中,我只需要包含它并将其插入该模块的声明数组中。 Angular2 CLI Angular-Meteor组件创建
menu.component.ts
import { Component, OnInit } from '@angular/core';
import { MenuItem } from './menu-item';
import { MENUITEMS } from './mocks';
@Component({
selector: 'menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {
menuItems: MenuItem[];
constructor() { }
ngOnInit() {
this.menuItems= MENUITEMS;
}
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { MenuComponent } from './menu/menu.component';
import { HomeComponent } from './home/home.component';
import { TrendsComponent } from './trends/trends.component';
import { ControllerComponent } from './controller/controller.component';
import { WaterPlantComponent } from './water-plant/water-plant.component';
import { DocsComponent } from './docs/docs.component';
@NgModule({
declarations: [
AppComponent,
MenuComponent,
HomeComponent,
TrendsComponent,
ControllerComponent,
WaterPlantComponent,
DocsComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot([
{ path: 'home', redirectTo: '', pathMatch: 'full' },
{ path: '', component: HomeComponent },
{ path: 'trends', component: TrendsComponent },
{ path: 'controller', component: ControllerComponent },
{ path: 'waterplant', component: WaterPlantComponent },
{ path: 'docs', component: DocsComponent }
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
一起来看流星,之后我添加index.ts到menu.component文件夹它仅适用:
index.ts
import { MenuComponent } from './menu.component';
export * from './menu.component';
个
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { PARTIES_DECLARATIONS } from './parties';
import { MenuComponent } from './menu/menu.component';
@NgModule({
imports: [
BrowserModule
],
declarations: [
AppComponent,
...PARTIES_DECLARATIONS,
MenuComponent
],
bootstrap: [
AppComponent
]
})
export class AppModule {}
可能的原因是编译器(该tsconfig.json内),这是用于ES6 CLI和jscommon为流星的 “模块”?
谢谢您的帮助!
答
看来,使用Angular CLI时,您使用的是Angular2样式指南目录结构,而不是Angular-Meteor directory structure,它建议将明确导入的文件放入名为imports
的目录中。考虑到Meteor的混合模块系统,是否可以为imports
目录以外的文件使用Meteor default load order导致您的问题,这可以通过index.ts
中的export
声明创建的MenuComponent
的加载顺序更改来解决?
你的帖子很混乱,你说“有流星,它不工作,直到我没有将文件index.ts添加到menu.component文件夹” - 你真的想说“它只在我添加一个index.ts?“ – Mikkel
是的,就是这一点。发布编辑,谢谢 –