如何成功地路由到Angular中的其他组件？
我对Angular非常陌生，但我正在尝试将一些路由纳入这个网站。默认屏幕是一个带有几个按钮的网格：
export class InvestigationsComponent implements OnInit{ ec. }有两个按钮，我想路由到他们自己的URL。我现在只专注于NewInvestigationComponent。
下面是按钮主体中的html：
<div class="router-containers">
<button id="advancedsearch" (click)="advancedSearchClicked()">Advanced Search</button>
<a id="newInv" [routerLink]="['NewInvestigationComponent']" routerLinkActive="active">New Investigation</a>
<new-investigation-root></new-investigation-root>
</div>所以我的网站有这个按钮，当我点击它时，URL确实变成了localhost:4200/NewInvestigationComponent，这是正确的。
现在，我如何让它显示我想要显示的HTML？
我的investigations-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule, ParamMap } from '@angular/router';
import { InvestigationsComponent } from './investigations.component';
import { NewInvestigationComponent } from './components/investigations-new/investigation-form.component';
const routes: Routes = [
{ path: 'InvestigationsComponent', component: InvestigationsComponent },
{ path: 'NewInvestigationComponent', component: NewInvestigationComponent },
{ path: '**', redirectTo: '/Investigationsomponent', pathMatch: 'full' },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class InvestigationsRoutingModule { }The investigation-form.component.ts
import { Component, OnInit } from '@angular/core';
/**import { HttpClient } from '@angular/common/http';**/
@Component({
selector: 'new-investigation-root',
templateUrl: './investigation-form.component.html',
styleUrls: ['./investigation-form.component.scss'],
})
export class NewInvestigationComponent implements OnInit{
ngOnInit(): void {
throw new Error("Method not implemented. Yet");
}
}The investigation-form.component.html
<base href="/NewInvestigationComponent">
<div>
<h2>THIS IS THE NEW SCREEN</h2>
</div>我的index.html，它正确地指向了我的第一个屏幕及其html：
!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>IndyInvestigations</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/scss" href="styles.scss">
<h1>Anomaly Investigations</h1>
</head>
<body>
<app-root></app-root>
<nav>
<ul>
<li><a routerLink="/InvestigationsComponent" routerLinkActive="active">First Component</a></li>
<li><a routerLink="/NewInvestigationComponent" routerLinkActive="active">Second Component</a></li>
</ul>
</nav>
</body>
</html>因此，我尝试更改investigation-form.component.ts中的选择器，并尝试向investigations.component.html添加<new-investigation-root></new-investigation-root>，但我不知道如何操作。
我觉得我应该向index.html添加某种路由或if选项，但我不确定如何添加。
回答 2
Stack Overflow用户
发布于 2020-09-16 05:59:26
先生，您使用的是路由，而不是元素<router-outlet></router-outlet>
路由器插座标签将相应地呈现导航的组件。你需要把它放在你想要呈现你的导航组件的地方！
Stack Overflow用户
发布于 2020-09-16 07:25:28
实际上，我按照我找到的vegibit.com/angular-routing-example的说明解决了这个问题，谢谢你的帮助。我的问题是我的路由模块没有正确引用我的组件。我没有意识到我必须将x与x进行匹配，如下所示：
路由器:Component.html=‘/x’
路由模块：{路径：'x'，组件: NewInvestigationComponent}
其中x对我来说就是“新调查”。我没有意识到编译器使用的路径，但我想我看到它检查HTML中的路径，然后使用路由模块来查看该路径引用了哪个组件。-
https://stackoverflow.com/questions/63910294
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号