如何在 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 中的链接时，我无法在 layout.component.html 中打开 clicked component

<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'
  }
];