Question

我是Angular的初学者我试图制作示例网站，我有一些问题，我有2页，

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

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

应用-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>

应用-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() {
  }

}

应用-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。

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

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

应用-navbar.component.html

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

应用-navbar.module.ts

@NgModule({ imports: [RouterModule] })

应用-routing.module.ts

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

Answer 2

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

并确保您在路由{ path: 'about.component', component: AboutComponent },

中添加了该组件

Angular页面无法打开

2 个答案: