【发布时间】：2017-11-25 13:45:36
【问题描述】：
我尝试构建一个包含 4 个链接的菜单。每个链接应指向一个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 时，它仍然显示相同的站点，尽管它显示了正确的 URL。
Business-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>
【问题讨论】：
-
你在
RouterModule注册了所有路由吗？ -
是的，见上文。我假设您是指我在问题中发布的
app.routing.ts的这一部分，对吧？
标签： javascript html angular routing