[英]Angular2 - import addons on each module… in routing?
我是否必須導入例如: "import { Angular2FontawesomeModule } from 'angular2-fontawesome/angular2-fontawesome'"
, import { MaterialModule } from '@angular/material';
...兩個模塊? (home.module.ts和app.module.ts)
如果我想在我的登錄名和dashborad組件中使用它?
因為我遇到類似“未處理的承諾拒絕:模板解析錯誤:由於它不是'fa'的已知屬性而無法綁定到'name'的錯誤。”
-app
-login
*login.component.html
...
-home
-dasborad
*dashboard.component.html
...
-users
*user.component.html
...
*home.component.html
*home.component
*home.module
-toolbar
*toolbar.component.html
*app.component
*app.module
app.module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HttpModule, BaseRequestOptions, Http } from '@angular/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Angular2FontawesomeModule } from 'angular2-fontawesome/angular2-fontawesome'
import { MaterialModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import { ResponsiveModule } from 'ng2-responsive'
import 'hammerjs';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { LoginViewComponent } from './login/login-view.component';
import { HomeModule } from "./home/home.module"
const appRoutes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: 'login', component: LoginComponent },
{ path: '**', component: LoginComponent }
];
@NgModule({
declarations: [
AppComponent,
LoginComponent,
LoginViewComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
Angular2FontawesomeModule,
MaterialModule,
FlexLayoutModule,
ResponsiveModule,
RouterModule.forRoot(appRoutes),
HomeModule
],
exports: [ RouterModule ],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
home.module
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { TopToolbarComponent } from '../toolbar/toolbar.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { UserComponent } from './user/user.component';
export const homeRoutes: Routes = [
{
path: 'home',
component: HomeComponent,
children:[
{ path: '', component: DashboardComponent },
{ path: 'dashboard', pathMatch: 'full', component: DashboardComponent },
{ path: 'user', pathMatch: 'full', component: UserComponent }
]
}
]
@NgModule({
imports: [
RouterModule.forChild(homeRoutes)
],
exports: [
RouterModule
],
declarations: [
TopToolbarComponent,
TopSearchComponent,
HomeComponent,
DashboardComponent,
UserComponent
]
})
export class HomeModule{}
您可以使用所有這些公共導入創建一個公共/共享模塊,然后將共享模塊導入到您想要相同功能的每個模塊(在Imports
數組中)。 請參考此鏈接 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.