如何将组件加载到另一个

Question

我尝试将 homeComponent 添加到我的 LayoutComponent 中。但是我看不到我的 homeComponent 的内容到 LayoutComponent 中。

用户连接后，我重定向到 homeComponent，我能够看到正确的内容。现在我想用一个通用的布局来包裹一些组件。

我的布局模板

<app-top-nav></app-top-nav>
<div class="wrapper">
        <app-side-nav></app-side-nav>
        <app-home></app-home>
</div>

我重定向到布局（来自我的 loginComponent）

 onSubmit() {
                this.submitted = true;
                // stop here if form is invalid
                if (this.loginForm.invalid) {
                        return;
                }

                this.loading = true;
                this.user.login = this.f.username.value;
                this.user.pwd = this.f.password.value;
                console.log(this.user);
                this.authenticationService.login(this.user)
                        .pipe(first())
                        .subscribe(
                                data => {
                                //      console.log (' test '+ this.returnUrl);
                                        this.router.navigate([this.returnUrl]);
                                },
                                error => {
                                        this.error = error;
                                        this.loading = false;
                                });
        }

我的路由

{ path: '', component: GlobalLayoutComponent, canActivate: [AuthGuard],
    //  children:[
    //          { path:'', redirectTo: 'home'},
    //          { path:'home', component : HomeComponent}
    //          ]
    },
        { path: 'login', component: LoginComponent },

编辑（添加app.module）

我的app.module

import { NbSecurityModule, NbRoleProvider } from '@nebular/security';
import { NbEvaIconsModule } from '@nebular/eva-icons';
import { MenuService } from './alertes/menu/menu.service';

import { JwtInterceptor } from './_helpers/jwt.interceptor';
import { ErrorInterceptor } from './_helpers/error.interceptor';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { TopNavComponent } from './layout/top-nav/top-nav.component';
import { SideNavTogglerComponent } from './layout/side-nav-toggler/side-nav-toggler.component';
import { SideNavService } from './_services/side-nav.service';
import { GlobalLayoutComponent } from './layout/global-layout/global-layout.component';
import { SideNavComponent } from './layout/side-nav/side-nav.component';

@NgModule({
  declarations: [
  AppComponent,
  HomeComponent,
  LoginComponent,
  TopNavComponent,
  SideNavTogglerComponent,
  GlobalLayoutComponent,
  SideNavComponent

  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    HttpClientModule,
    ThemeModule.forRoot(),
    NbThemeModule.forRoot(),
    NbMenuModule.forRoot(),
    NbAuthModule.forRoot(),
    NbSecurityModule.forRoot(),
    FormsModule,
    ReactiveFormsModule,
    // Validators,
    ConfirmationPopoverModule.forRoot({
      confirmButtonType: 'danger'}),
    ToastrModule.forRoot(),
    ChartsModule,
    Ng2SmartTableModule,
    NbEvaIconsModule
  ],
  providers: [
    { provide: APP_BASE_HREF, useValue: '/' },
    UserService,
    MenuService,
    SideNavService,
    { provide: NbRoleProvider,
      useValue: {
      getRole: () => {
      return observableOf(['admin','user'])},},},
      { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
      { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我不知道我错过了什么。

此代码显示了我的 globallayout，里面没有 homeComponent。我正在寻找在 GlobalLayoutComponent 中正确显示 homeComponent (<app-home>) 的解决方案。谢谢你的帮助

Answer 1

如果您想将一个组件加载到另一个组件中，您必须在声明中的父模块中添加另一个组件

declarations: [
  AnotherComponent 
]

如何将组件加载到另一个

How to load component into another

routing

router-outlet

angular