angular2 中的多个组件 [英] Multiple Components in angular2
问题描述
我是 angular 2 的新手,在多个组件中,我在一个文件夹文件中编写了两个组件,我在第一个文件中导入了第二个类,并给出了指令:class 但它显示错误!这里是 app.module.ts 文件
I'm new to angular 2 , In multiple components i have written a two components in a single folder file i have import the 2nd class in first file and given directive: class but its showing error! Here the app.module.ts file
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
Here the first component file 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
Here second Component file 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 { }
请告诉我们如何使用和显示多个组件!
Please tell us how to use and display the multiple components!
推荐答案
在最新的 angular @Component.directives
中已弃用,因此您必须在 中声明您的
mydetailsComponent
>AppModule
in latest angular @Component.directives
are deprecated so you have to declare your mydetailsComponent
in AppModule
app.module.ts
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
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 { }
这篇关于angular2 中的多个组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!