Angular页面无法打开

Question

我是Angular的初学者我试图制作样本网站，我有一些问题，我创作了2页，

1. about.component.html 2. Contact.component.html但我无法打开那些页面，

我想知道如何正确设置链接，以及最适合用于开发网站Angular或Angular-js的链接？

APP-navbar.component.html

   <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"     (click)="toggleCollapsed()">
    <span class="navbar-toggler-icon"></span>
      </button>
     <div id="navbarSupportedContent" [ngClass]="{'collapse': collapsed, 'navbar-collapse': true}">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link"  >DASHBOARD<span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="about.component.html">About</a>
          </li>
       </div>
    </nav>

---

APP-navbar.component.ts

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

@Component({
  selector: 'app-navbar',
  templateUrl: './app-navbar.component.html',
  styleUrls: ['./app-navbar.component.css']
})
export class AppNavbarComponent implements OnInit {
  constructor() { }
  date = new Date();
  ngOnInit() {
  }

}

APP-routing.module.ts

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

    @NgModule({
      exports: [ RouterModule ]
    })
    export class AppRoutingModule {}
    const routes: Routes = [
      { path: 'inde',
        component: IndexComponent,
      },
      // map '/' to '/persons' as our default route
      {
        path: '',
        redirectTo: '/index',
        pathMatch: 'full'
      },
    ];
    export const appRouterModule = RouterModule.forRoot(routes);

Answer 1

你应该使用routerLink。不是href。

你可以routerLink。进口后RouterModule。

如果你想路线到about component，你应该在route info为about component写app-routing.module.ts。

官方文件在这里= >> https://angular.io/api/router/RouterLink

示例代码是（只需要代码）

APP-navbar.component.html

<a class="nav-link" [routerLink]="['/about']">About</a>

APP-navbar.module.ts

@NgModule({ imports: [RouterModule] })

APP-routing.module.ts

const routes: Routes = [{path: 'about', component: AboutComponent}];

Answer 2

你应该使用routerLink <a routerLink="/about.component">

并确保你在Routes{ path: 'about.component', component: AboutComponent },中添加了该组件