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