Question

我尝试用4个链接构建一个menue。每个链接应指向一个html。

<p>
  <a routerLink="/function">Business Function</a>
  <a routerLink="/process">Business Process</a>
  <a routerLink="/appsystem">Appsystem</a>
  <a routerLink="/application">Application</a>
</p>

我在我的app.routing.ts中实现了它们（也包含了导入）：

const appRoutes: Routes = [
    {
        path:"function",
        component: BusinessFunctionComponent,
    },
    {
        path:"process",
        component: BusinessProcessComponent,
    },
    {
        path:"appsystem",
        component: AppsystemComponent,
    },
    {
        path:"application",
        component: ApplicationComponent,
    }

例如，当我尝试访问html BusinessFunctionComponent时，它仍显示相同的网站，但显示的网址正确。

商家-Function.ts

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

@Component({
  selector: 'app-business-function',
  templateUrl: './business-function.component.html',
  styleUrls: ['./business-function.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class BusinessFunctionComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

有人可以帮我解决这个问题，因为我对Angular很新吗？谢谢你到目前为止!!

修改

我将链接移动到index.html内的导航栏。

<body>

    <header>
        <nav class="navbar navbar-expand-lg navbar-dark bg-color">
          <!-- <a class="navbar-brand" href="#">Navbar</a> -->
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse navbar-adjustment" id="navbarColor01">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item activ-link">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/function">Business Funciton</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/process">Business Process</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/appsystem">Appsystem</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="/application">Application</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
              <input class="form-control mr-sm-2" type="text" placeholder="Search">
              <button class="btn btn-style my-2 my-sm-0" type="submit">Search</button>
            </form>
          </div>
        </nav>
      </header>

      <router-outlet></router-outlet>
      <app-root></app-root>
  <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
  integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
  crossorigin="anonymous"></script>

</body>

Answer 1

将以下代码添加到主HTML或应用程序组件html

 <router-outlet></router-outlet>

路由组件将显示在此处。

Answer 2

 <header>
        <nav class="navbar navbar-expand-lg navbar-dark bg-color">
          <!-- <a class="navbar-brand" href="#">Navbar</a> -->
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse navbar-adjustment" id="navbarColor01">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item activ-link">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/function">Business Funciton</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/process">Business Process</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/appsystem">Appsystem</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="/application">Application</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
              <input class="form-control mr-sm-2" type="text" placeholder="Search">
              <button class="btn btn-style my-2 my-sm-0" type="submit">Search</button>
            </form>
          </div>
        </nav>
      </header>
      <router-outlet></router-outlet>

将其移至app.component.html

Angular 2 - 路由不起作用

2 个答案: