angular2中的多個組件

Question

我是新來的角2，在多個組件中，我已經在單個文件夾文件中寫入了兩個組件我已經在第一個文件中導入了第二個類並給出了指令：class但是它顯示錯誤！ 這裏app.module.ts文件

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
@NgModule({ 
    imports:  [ BrowserModule ], 
    declarations: [ AppComponent ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

在此，第一組件文件app.component.ts

import { Component } from '@angular/core'; 
import { mydetailsComponent } from './app.details'; 

@Component({ 
    selector: 'my-app', 
    template: `<h1>Welcome to this Application...</h1> 
    <p>We have the App details here:</p> 
    <mydetails></mydetails> 
    ` 
    directives: [ mydetailsComponent ] }) 
export class myAppComponent { } 

這裏第二組件文件app.details.ts

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'mydetails', 
    template: `<ul> 
      <li>Settings</li> 
      <li>Profile</li> 
      <li>Games</li> 
      <li>Gallery</li> 
      ` 
}) 
export class mydetailsComponent { } 

請告訴我們如何使用和顯示多個組件！

Answer 1

在最新的角@Component.directives已過時，所以你必須聲明你mydetailsComponent在AppModule

// app.module.ts 
import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { mydetailsComponent } from './app.details'; 
@NgModule({ 
    imports:  [ BrowserModule ], 
    declarations: [ AppComponent, mydetailsComponent ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 


// app.component.ts 
import { Component } from '@angular/core'; 
import { mydetailsComponent } from './app.details'; 

@Component({ 
    selector: 'my-app', 
    template: `<h1>Welcome to this Application...</h1> 
    <p>We have the App details here:</p> 
    <mydetails></mydetails> 
    ` 
}) 
export class myAppComponent { }