Angular页面无法打开

时间:2017-12-19 05:41:19

标签: angular

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

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

我想知道如何正确设置链接,以及最好的方法 用于开发网站AngularAngular-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);

2 个答案:

答案 0 :(得分:2)

您应该使用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}];

答案 1 :(得分:1)

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

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

中添加了该组件