Question

每当我运行程序时，它都会给我一个空白屏幕。标题名称除外。下面是我的项目的源代码。我也尝试通过在app.component.html文件中编写html代码来进行尝试，但仍然显示空白屏幕。

app.component.html

<app-nav-bar></app-nav-bar>
<section>
  <router-outlet></router-outlet>
</section>

nav-bar.component.html

<header>
    <div class="container">
        <a routerLink="/home">home</a>
        <ul>
            <li><a routerLink="/about">about</a></li>
        </ul>
    </div>
</header>

nav-bar.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-nav-bar',
  templateUrl: './nav-bar.component.html',
  styleUrls: ['./nav-bar.component.css']
})
export class NavBarComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

index.html

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>WatchMe</title>
  </head>
  <body>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"integrity="sha384Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <app-root></app-root>
  </body>
</html>

app.component.ts

import { Component } from '@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
}

app.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { BookTicketComponent } from './components/book-ticket/book-ticket.component';
import { SignupComponent } from './components/sign/signup/signup.component';
import { AdminComponent } from './components/admin/admin.component';
import { NavBarComponent } from './components/nav-bar/nav-bar.component';


const routes: Routes = [
  {
    path:'home',
    component:HomeComponent

  },
  {
    path:'about',
    component:AboutComponent
  },
  {
    path:'book_ticket',
    component:BookTicketComponent
  },
  {
    path:'sign_signup',
    component:SignupComponent
  },
  {
    path:'admin',
    component:AdminComponent
  },
  {
    path:'navbar',
    component:NavBarComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule ,CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import { AlertModule } from 'ngx-bootstrap';
import {RouterModule} from '@angular/router'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { BookTicketComponent } from './components/book-ticket/book-ticket.component';
import { SignupComponent } from './components/sign/signup/signup.component';
import { AdminComponent } from './components/admin/admin.component';
import { NavBarComponent } from './components/nav-bar/nav-bar.component';

@NgModule({

  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
    BookTicketComponent,
    SignupComponent,
    AdminComponent,
    NavBarComponent
  ],
  imports: [
    BrowserModule,
    RouterModule,

    AlertModule.forRoot(),
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

您缺少标头标记中的基本href

index.html

<head>
  <base href="/" /> // this has to be there for angular routing to work correctly
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <title>WatchMe</title>
</head>

您还没有指定默认路由

const routes: Routes = [
  // specify your default route here
  // this means when it lands on / it will go to the home page
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path:'home',
    component: HomeComponent
  },
  {
    path:'about',
    component: AboutComponent
  },
  {
    path:'book_ticket',
    component: BookTicketComponent
  },
  {
    path:'sign_signup',
    component: SignupComponent
  },
  {
    path:'admin',
    component: AdminComponent
  },
  {
    path:'navbar',
    component: NavBarComponent
  }
];

为什么我的app.component.html文件不起作用？

1 个答案: