我使用角4和角/材料。MdToolbar工作正常,但是当我添加MdSdenav到我的应用程序模板就像留档状态节点给我一个参考错误:导航器未定义。有人经历过类似的吗?
s rc/app.组件. html
<md-sidenav-container>
<layout-header>
<nav-bar></nav-bar>
<!-- TODO: Create nav component -->
<a routerLink="/">Home</a>
<a routerLink="/about">About</a>
<a routerLink="/lazy">Lazy</a>
<a routerLink="/lazy2">Lazy 2</a>
<a routerLink="/user-profile">User Profile</a>
<a routerLink="/test-rest">Test Rest</a>
<a routerLink="/test-route-params">Test Route Params</a>
</layout-header>
<md-sidenav #sidenav class="sidenav">
<ul>
<li>Search</li>
<li>Start a Group</li>
<li>App Settings</li>
<li>About</li>
<li>Help</li>
<li>Logout</li>
</ul>
</md-sidenav>
<!--primary router outlet: a dynamic component that the router uses to
display-->
<router-outlet></router-outlet>
<!-- TODO: Issue with event not emitting via onShown/onHidden -->
<!-- Ref: https://github.com/valor-software/ngx-bootstrap/issues/1886 -->
<app-dialog (dynamicComponent)="onDialogLoad($event)" (onShown)="test()"
(onHidden)="test2()"></app-dialog>
<!--TODO: example; Delete-->
<button (click)="create()">Create</button>
<simple-notifications [options]="options"></simple-notifications>
<layout-footer></layout-footer>
</md-sidenav-container>
src/app. module.ts
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
TransferHttpModule,
NgReduxModule,
MdToolbarModule,
MdSidenavModule,
MdIconModule,
MdCardModule,
MdInputModule,
MdButtonModule,
DialogModule.forRoot([LoginForm]),
SimpleNotificationsModule.forRoot(), // TODO: remove; testing only
RouterModule.forRoot(AppRoutes)
],
providers: [ AuthGuard, DialogService ],
declarations: [
AppComponent,
HomeView,
AboutComponent,
HeaderComponent,
FooterComponent,
NavBarComponent,
LoginForm,
SideNavComponent
],
exports: [ AppComponent ],
bootstrap : [ AppComponent ]
})导出类AppModule{}
NodeJS错误
在您的情况下,只需从NgModule导出MdSdenavModule即可。
我很幸运地将材料模块(跨多个组件使用的模块)分解为自己的模块,这对app. module进行了一些清理。然后在app.module中进行了导入和导出,如下所示:
物料.模块. ts
import { MdSidenavModule } from '@angular/material';
.
.
const MATERIAL_MODULES = [
MdSidenavModule,
.
.
];
@NgModule({
imports: MATERIAL_MODULES,
exports: MATERIAL_MODULES
})
export class MaterialModule { }
app. module
import { MaterialModule } from '../material.module';
.
.
@NgModule({
imports: [
MaterialModule,
.
.
],
exports: [ MaterialModule ],
})