Question

我正在用angular6做项目。我创建了页眉和页脚组件。当我在app.component.html中使用选择器<app-header>和<app-footer>时，它将正常工作。但是，如果我在其他组件中使用此选择器，则不会显示页眉和页脚。我已经将此组件包含在app.module.ts文件中。任何人都可以提出任何解决此问题的建议。

login.component.html

<app-header></header>
<app-footer></app-footer>

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

app.module.ts

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 { }

Answer 1

利用Angular Routing来重复使用Web应用程序中常见的布局（例如页眉和页脚）。

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

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

1 个答案: