Не удается получить угловой маршрут по маршруту - PullRequest
Новая
       9

Не удается получить угловой маршрут по маршруту

0 голосов
/ 24 февраля 2019

Я создаю шаблон моего приложения angular 7, но маршрутизация работает не так, как ожидалось.Я не получаю ошибок ни при компиляции, ни во время выполнения, но когда я пытаюсь отобразить простое содержимое компонента, к которому я хочу направить, ничего не отображается.Адресная строка показывает, что он считает, что он находится на правильном маршруте, но мой HTML для этого компонента не отображается.

Весь проект доступен на GitHub на https://github.com/cpeddie/TRACS3.git

Я следовалкуча разных уроков, так что я не понимаю, что происходит.

Спасибо!

Ответы [ 3 ]

0 голосов
/ 24 февраля 2019

Проверил код, попробуйте это изменение

Добавьте теги в теги sidenav в вашем app.component.html

  1. Нет необходимости импортировать модуль маршрутизаторав модуле приложения.Просто импортируйте свой пользовательский модуль AppRouting

Вставьте ниже в ваш app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatToolbarModule } from '@angular/material'; 
import { MatMenuModule } from '@angular/material'; 
import { MatIconModule } from '@angular/material'; 
import { MatListModule } from '@angular/material'; 
import { MatButtonModule } from '@angular/material'; 
import { MatSidenavModule } from '@angular/material/sidenav';
import { HttpClientModule } from "@angular/common/http";
import { FlexLayoutModule } from '@angular/flex-layout';
import { LayoutModule } from '@angular/cdk/layout';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing/app-routing.module';
import { SettingsComponent } from './components/settings/settings.component';
import { HomeComponent } from './components/home/home.component';
import { BugReportComponent } from './components/bugreport/bugreport.component';
import { AboutComponent } from './components/about/about.component';
import { LoginComponent } from './components/login/login.component';
import { LogoutComponent } from './components/logout/logout.component';


@NgModule({
  declarations: [
    AppComponent,
    SettingsComponent,
    HomeComponent,
    BugReportComponent,
    AboutComponent,
    LoginComponent,
    LogoutComponent,

  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatSidenavModule,
    MatMenuModule,
    MatButtonModule,
    MatListModule,
    MatIconModule,
    HttpClientModule,
    FlexLayoutModule,
    LayoutModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
0 голосов
/ 24 февраля 2019

Ваш пользовательский интерфейс великолепен, организация папок на подходе, даже ваша маршрутизация работает отлично, ваша конкретная ошибка такова:

Внутри app.component.html вы устанавливаете встроенный стиль для верхнегоmost div. 

style="height: 100vh;

Это приводит к тому, что контейнер navbar занимает всю вертикальную высоту вашей веб-страницы, что делает невозможным просмотр содержимого, которое вы хотите отобразить в других ваших компонентах.Удаление этого стиля заставляет все это работать!

Более того, я бы изменил его на что-то вроде: 

margin-bottom: 50px;

, чтобы отделить панель навигации от контента, который вы хотите отобразить.Надеюсь, что это решит вашу проблему!

0 голосов
/ 24 февраля 2019

Разобрался.Теги были в неправильном месте в файле app.component.html.Они должны быть в тегах содержимого sidenav.

...