如何在ng-content angular 6中包含内容

Question

我最近了解了Angular，现在我正尝试用angular 6创建一个菜单系统。这是我的文件夹结构

我的app.module.ts

import { BrowserModule, } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { LoginformComponent } from './loginform/loginform.component';
import { AppRoutingModule } from './app-routing.module';
import { ReactiveFormsModule }    from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { RegisterformComponent } from './registerform/registerform.component';
import { HttpClientModule } from  '@angular/common/http';
import { AlertModule } from 'ngx-alerts';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AuthGuard } from './auth.guard'
import { RouterModule, Routes } from '@angular/router';
import { UiModule } from './ui/ui.module';
import { LayoutComponent } from './ui/layout/layout.component';
import { HeaderComponent } from './ui/header/header.component';
import { FooterComponent } from './ui/footer/footer.component';
import { DashboardComponent } from './ui/dashboard/dashboard.component';
import { ProfilComponent } from './ui/profil/profil.component';

const appRoutes: Routes = [{
    path: "",
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: "login",
    component: LoginformComponent,
    data: {
      animation: 'login'
    }
  },
  {
    path: "register",
    component: RegisterformComponent,
    data: {
      animation: 'register'
    }
  },
  {
    path: "adminpanel",
    component: LayoutComponent,
    children: [{
        path: '',
        redirectTo: 'dashboard',
        pathMatch: 'full'
      },
      {
        path: 'dashboard',
        component: DashboardComponent
      },
      {
        path: 'profil',
        component: ProfilComponent
      }
    ]
  }
];

@NgModule({
  declarations: [
    AppComponent,
    LoginformComponent,
    RegisterformComponent,
    LayoutComponent,
    HeaderComponent,
    FooterComponent,
    DashboardComponent,
    ProfilComponent
  ],

  imports: [
    RouterModule.forRoot(appRoutes),
    ReactiveFormsModule,
    BrowserModule,
    AppRoutingModule,
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AlertModule.forRoot({
      maxMessages: 1,
      timeout: 5000
    }),
    BrowserAnimationsModule,

  ],
  exports: [
    HeaderComponent,
    FooterComponent,
  ],
  providers: [AuthGuard],
  bootstrap: [AppComponent],

})

export class AppModule {}

因此，第一个用户将登录，然后登录后用户将转到layout-component。

这是我的layout.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.css']
})
export class LayoutComponent implements OnInit {
  constructor() {}
  ngOnInit() {}
}

这是我的layout.component.html

<app-header></app-header>
<div class="container">
  <ng-content></ng-content>
</div>
<app-footer></app-footer>

上面的脚本没有错误。但是我的问题是，当我单击header.component.ts中的链接时，无法在clicked component

中打开layout.component.html

<div class="navbar-nav">
  <a class="nav-item nav-link active" 
    routerLink="/adminpanel/dashboard" 
    routerLinkActive="active">
    Dashboard
  </a>
  <a class="nav-item nav-link" 
    routerLink="/adminpanel/profil" 
    routerLinkActive="active">
    Profil
  </a>
</div>

Answer 1

您要在此处执行的操作是根据路线加载组件。为此使用router-outlet。 ng-content用于在组件中渲染投影内容。

使用router-outlet代替ng-content

更改此：

<app-header></app-header>
<div class="container">
  <ng-content></ng-content>
</div>
<app-footer></app-footer>

对此：

<app-header></app-header>
<div class="container">
  <router-outlet></router-outlet>
</div>
<app-footer></app-footer>

您的路由配置也有问题，应该这样更改：

const appRoutes: Routes = [
  {
    path: "login",
    component: LoginformComponent,
    data: {
      animation: 'login'
    }
  },
  {
    path: "register",
    component: RegisterformComponent,
    data: {
      animation: 'register'
    }
  },
  {
    path: "adminpanel",
    component: LayoutComponent,
    children: [
      {
        path: 'dashboard',
        component: DashboardComponent
      },
      {
        path: 'profil',
        component: ProfilComponent
      },
      {
        path: '',
        redirectTo: '/adminpanel/dashboard',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: "",
    redirectTo: '/login',
    pathMatch: 'full'
  }
];