Angular2（CLI）：独立的通用组件和逻辑组件

Question

在角度1.4中，我使用了ng6样板，它产生了一个很棒的结构，如：

app
  common
  components
  services


etc...

现在我试图用打字稿学习angular2。我使用Angular CLI。

我想从角度1.4中移植一些结构：我的意思是将客户组件等中的select-component分开。

我创造了这样的结构：

组件 - 是一个模块，客户是一个模块，列表 - 是一个组件。

如何在我的app.component.html中使用list-component？像：

<app-customer-list></app-customer-list>

我在导入模块时遇到了麻烦。组件。

我是这样做的：

**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 { AppComponent } from './app.component';

import { ComponentsModule } from './components/components.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ComponentsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

-

**components.module.ts**

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

import { CustomerModule } from './customer/customer.module';


@NgModule({
  imports: [
    CustomerModule
  ],
  declarations: []
})
export class ComponentsModule { }

-

**customer.module.ts**

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CustomerComponent } from './customer.component';
import { ListComponent } from './list/list.component';

@NgModule({
  imports: [
    CommonModule
  ]
  declarations: [CustomerComponent, ListComponent]
})
export class CustomerModule { }

-

**list.component.ts**

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

@Component({
  selector: 'app-customer-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

我做错了什么？我怎样才能正确导入它们？

Answer 1

您忘记将组件/模块导出到与其他模块共享的模块中：

＆＃13;

＆＃13;

**customer.module.ts**

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CustomerComponent } from './customer.component';
import { ListComponent } from './list/list.component';

@NgModule({
  imports: [
    CommonModule
  ]
  declarations: [CustomerComponent, ListComponent],
  exports: [CustomerComponent, ListComponent]
})
export class CustomerModule { }

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

**components.module.ts**

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

import { CustomerModule } from './customer/customer.module';


@NgModule({
  imports: [
    CustomerModule
  ],
  exports: [CustomerModule]
  declarations: []
})

＆＃13;

＆＃13;

＆＃13;