Question

我正在构建我的angular 7应用程序的模板，但是路由未按预期工作。我从编译或运行时都没有收到错误，但是当我尝试显示要路由的组件的简单内容时，没有任何显示。地址栏显示它认为它在正确的路径中，但是未显示该组件的html。

整个项目可在github上找到： https://github.com/cpeddie/TRACS3.git

我遵循了许多不同的教程，所以我不知道发生了什么。

谢谢！

Answer 1

弄清楚了。标签在app.component.html文件中的错误位置。它们必须位于sidenav内容标签内。

Answer 2

检查您的代码，尝试更改

在app.component.html中的sidenav标签中添加标签

无需在App模块中导入路由器模块。只需导入您的自定义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 { }

Answer 3

您的用户界面很棒，您的文件夹组织就可以了，即使您的路由工作也很好，您的特定错误是：

在app.component.html内部，您将内联样式设置为最上面的div。

style="height: 100vh;

这导致导航栏包含程序占据网页的整个垂直高度，从而使您无法看到要在其他组件中显示的内容。删除此样式即可使其正常工作！

此外，我会将其更改为：

margin-bottom: 50px;

将导航栏与您要显示的内容分开。希望这能解决您的问题！

无法获取角路由

3 个答案: