无法在Angular中布线组件（布线时显示空白页）

时间：2019-04-30 02:15:03

标签： angular angular-ui-router

我似乎无法在Angular中使用路由。在这方面，我仍然几乎是一个绿色的号角。

另一方面，我正在尝试制作一个教育性网站，非常感谢您提供一些有关编码标准的建议。

home.component.html（./src/app/home） 

    <div class="container">
  <div class="row">
    <div class="col-md-8 col-lg-6">
      <h1>
        <font style="vertical-align: inherit;">
          <font style="vertical-align: inherit;">Google Map API Developers Guide</font>
        </font>
      </h1>
    </div>
  </div>

home.component.ts（./ src / app / home） 

    import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }

}

app-routing.module.ts（./ src / app） 

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent }
];

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

app.component.html（./ src / app） 

<div class="Header__Wrapper shadow p-3 mb-5 bg-white rounded">
    <div class="container">
      <div class="Header__Inner row">
        <div class="col col-lg-3">
          <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Google_maps_logo.png" width="150" height="30"
            alt="logo">
        </div>
        <div class="col-lg-7 d-none d-lg-block">
          <ul class="nav nav-pills justify-content-center ">
            <li class="nav-item">
              <a class="nav-link active" id="pills-home-tab" data-toggle="pill" routerLink="#home" role="tab"
                aria-controls="pills-home" aria-selected="true">Home</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" data-toggle="dropdown" routerLink="#" role="button" aria-haspopup="true"
                aria-expanded="false">Dropdown</a>
              <div class="dropdown-menu">
                <a class="dropdown-item" routerLink="#">About us</a>
                <a class="dropdown-item" routerLink="#">Another action</a>
                <a class="dropdown-item" routerLink="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" routerLink="#">Separated link</a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="pills-profile-tab" data-toggle="pill" routerLink="#pills-profile" role="tab"
                aria-controls="pills-profile" aria-selected="false">Profile</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="pills-contact-tab" data-toggle="pill" routerLink="#pills-contact" role="tab"
                aria-controls="pills-contact" aria-selected="false">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

<router-outlet></router-outlet>

app.component.ts（./src/app） 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-maps';
}

app.module.ts（./src/app） 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FooterComponent } from './footer/footer.component';
import { AppRoutingModule } from './app-routing.module';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    FooterComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

index.html（./ src / app） 

<!doctype html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <meta charset="utf-8">

  <title>MyMaps</title>

  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
    <div class="container-fluid"></div>

        <app-root></app-root>

    </div>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

路由器链接应这样写： [routerLink]=['/home']（或）routerLink="/home" 而不是routerLink="#home"

在路由器链接中，我们应该定义路径而不是＃

<div class="Header__Wrapper shadow p-3 mb-5 bg-white rounded">
    <div class="container">
      <div class="Header__Inner row">
        <div class="col col-lg-3">
          <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Google_maps_logo.png" width="150" height="30"
            alt="logo">
        </div>
        <div class="col-lg-7 d-none d-lg-block">
          <ul class="nav nav-pills justify-content-center ">
            <li class="nav-item">
              <a class="nav-link active" id="pills-home-tab" data-toggle="pill" [routerLink]=[''] role="tab"
                aria-controls="pills-home" aria-selected="true">Home</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" data-toggle="dropdown" routerLink="#" role="button" aria-haspopup="true"
                aria-expanded="false">Dropdown</a>
              <div class="dropdown-menu">
                <a class="dropdown-item" routerLink="#">About us</a>
                <a class="dropdown-item" routerLink="#">Another action</a>
                <a class="dropdown-item" routerLink="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" routerLink="#">Separated link</a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="pills-profile-tab" data-toggle="pill" routerLink="#pills-profile" role="tab"
                aria-controls="pills-profile" aria-selected="false">Profile</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="pills-contact-tab" data-toggle="pill" routerLink="#pills-contact" role="tab"
                aria-controls="pills-contact" aria-selected="false">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

<router-outlet></router-outlet>

和在app.module.ts

中 
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { HomeComponent } from './home/home.component';

 const routes: Routes = [
    { path: 'home', component: HomeComponent },
    { path: '', redirectTo: 'home', pathMatch: 'full' }

 ];

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

据您所知，您可以阅读以下内容：https://angular.io/api/router/RouterLink

相关问题
最新问题