首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在angular6项目中使用选择器时未加载页眉和页脚

在angular6项目中使用选择器时未加载页眉和页脚
EN

Stack Overflow用户
提问于 2019-04-13 00:56:23
回答 1查看 126关注 0票数 0

我正在用angular6做项目。我已经创建了页眉和页脚组件。当我在app.component.html中使用选择器<app-header><app-footer>时,它会工作得很好。但是如果我在其他组件中使用这个选择器,它将不会显示页眉和页脚。我已经在app.module.ts file.Can中包含了这个组件,任何人请提供任何建议来解决这个问题。

login.component.html

代码语言:javascript
复制
<app-header></header>
<app-footer></app-footer>

我需要在登录页面中显示页眉和页脚。但它不起作用。

app.module.ts

代码语言:javascript
复制
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { CustomMaterialModule } from './material.module';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { ContactUsComponent } from './contact-us/contact-us.component';
import { AboutUsComponent } from './about-us/about-us.component';
import { LoginComponent } from './login/login.component';
import { UserComponent } from './user/user.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DashboardComponent } from './dashboard/dashboard.component';
import { NotificationComponent } from './notification/notification.component';
import { SendMessageComponent } from './send-message/send-message.component';


import { DashboardRoutingModule } from './dashboard/dashboard-routing.module';
import { NotesComponent } from './notes/notes.component';
import { PopupComponent } from './popup/popup.component';

import { MyDialogComponent } from './my-dialog/my-dialog.component';

import { MatDialogModule,MatButtonModule, MatToolbarModule, MatGridListModule,MatCardModule,MatSidenavModule, MatIconModule, MatListModule } from '@angular/material';
import {MatSelectModule} from '@angular/material/select';
import { LogoutComponent } from './logout/logout.component';
import { MainNavComponent } from './main-nav/main-nav.component';
import { LayoutModule } from '@angular/cdk/layout';
import { FooterComponent } from './footer/footer.component';
import { HeaderComponent } from './header/header.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ContactUsComponent,
    AboutUsComponent,
    LoginComponent,
    UserComponent,
    DashboardComponent,
    NotificationComponent,
    SendMessageComponent,
    NotesComponent,
    PopupComponent,
    MyDialogComponent,
    LogoutComponent,
    MainNavComponent,
    FooterComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CustomMaterialModule,
    FormsModule,
    BrowserAnimationsModule,
    DashboardRoutingModule,
    MatDialogModule, 
    MatButtonModule,
    ReactiveFormsModule,
    MatSelectModule,
    LayoutModule,
    MatToolbarModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    MatCardModule,
    MatGridListModule

  ],

  entryComponents: [
  MyDialogComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
EN

回答 1

Stack Overflow用户

发布于 2019-04-15 02:12:30

利用Angular Routing重用常见组件,如页眉和页脚,这些组件是web应用程序中常见的布局。

请参阅:- https://blog.angularindepth.com/angular-routing-reusing-common-layout-for-pages-from-different-modules-440a23f86b57

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55656420

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档