angular2中的多个组件

时间:2016-11-18 13:16:08

标签: angular angular2-template

我是角度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 { }

请告诉我们如何使用和显示多个组件!

1 个答案:

答案 0 :(得分:7)

最近的角度mydetailsComponent中的

已弃用,因此您必须在AppModule

中声明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.module.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 { }

app.component.ts

update emp
set hiredate = to_date('2001'||to_char(hiredate, 'mmddhh24MISS'), 'yyyymmddhh24MISS');