Question

在我的app.component中，我想显示2个不同的组件。一个是课程列表，另一个是作者列表。

我最终在下面，他们分别工作，所以coursescomponent注释了作者组件将显示。

如何同时显示两者？

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

这样做：

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 { }

顺便说一句，根据最新的Angular版本更新您的代码，如本教程

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

将您的指令，管道和其他组件包含在declarations数组中。

<强>的src /应用程序/ 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 { }

在我的app.component.ts中添加2个组件

1 个答案: