Как включить контент в нг-контент угловой 6 - PullRequest
Новая
       36

Как включить контент в нг-контент угловой 6

0 голосов
/ 28 сентября 2018

Я недавно узнал об Angular, сейчас я пытаюсь создать систему меню в Angular 6. Вот моя структура папок

enter image description here

Myapp.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>

1 Ответ

0 голосов
/ 28 сентября 2018

То, что вы пытаетесь сделать здесь, это загрузить компонент на основе маршрутов.Для этого используется 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'
  }
];
...