Hinzufügen von 2 Komponenten in meiner app.component.ts

Question

In meiner appcomponent möchte ich 2 verschiedene Komponenten anzeigen. Einer ist eine Liste von Kursen, der andere eine Liste von Autoren.

Ich endete mit unten, individuell sie arbeiten, so Kurse Komponente auskommentierte die Autoren-Komponente wird angezeigt.

Wie kann ich beide anzeigen lassen?

import {Component} from 'angular2/core'; 
import {CoursesComponent} from './courses.component' 
import {AuthorsComponent} from './authors.component' 

@Component({ 
selector: 'my-app', 
template: '<h1>My first Angular2 App</h1><courses></courses>', 
directives: [CoursesComponent], 

}) 

@Component({ 
selector: 'my-app', 

template: '<authors></authors>', 
directives: [AuthorsComponent] 

}) 
export class AppComponent { } 

Answer 1

dies tun:

import {Component} from 'angular2/core'; 
import {CoursesComponent} from './courses.component' 
import {AuthorsComponent} from './authors.component' 

@Component({ 
    selector: 'my-app', 
    template: '<h1>My first Angular2 App</h1><courses></courses> <authors></authors>', 
    directives: [CoursesComponent, AuthorsComponent], 
}) 

export class AppComponent { } 

btw, aktualisieren Sie Ihren Code based on neueste abgewinkelte Ausführung als dieses Tutorial

https://angular.io/docs/ts/latest/guide/learning-angular.html

Ihre Richtlinien enthalten, Rohr und andere Komponenten zu declarations Array.

src/app/app.module.ts

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 

@NgModule({ 
    imports:  [ BrowserModule ], 
    declarations: [ AppComponent/* other pipe, directive, component */ ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { }