Несколько компонентов в angular2

Question

Я новичок в угловом 2. В нескольких компонентах я написал два компонента в одном файле папки. Я импортировал 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 { }