如何成功路由到 Angular 中的其他组件？答案

【问题标题】：How can I successfully route to my other components in Angular?如何成功路由到 Angular 中的其他组件？
【发布时间】：2020-09-15 21:47:57
【问题描述】：

我对 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 { }

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");
  }

}

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 中的选择器，并尝试将<new-investigation-root></new-investigation-root> 添加到investigations.component.html，但我不知道该怎么做。

我觉得我应该在index.html 中添加某种路由或if 选项，但我不确定如何。

【问题讨论】：

标签： javascript html angular sass routes

【解决方案1】：

先生，您使用的是路由，但不是元素<router-outlet></router-outlet>

Router outlet 标签将相应地呈现导航组件。您需要将其放置在您要呈现导航组件的位置！

【讨论】：

所以如果我将它标记到最后，就像这样<a id="newInv" [routerLink]="['NewInvestigationComponent']" routerLinkActive="active">New Investigation</a> <router-outlet></router-outlet> url 仍然会发生变化，但我没有让我的测试标头出现....啊，我想我只是不确定路由是如何工作的。就像我如何确保我现在定义的路线得到我的调查表单.component.ts 和调查表格表单.component.html 的支持一样
你贴的第一个代码块，能告诉文件名吗？
嘿Abhijeet，我实际上设法按照我找到的说明解决了这个问题vegibit.com/angular-routing-example 感谢您的帮助。我的问题是我的路由模块没有正确引用我的组件。我没有意识到我必须将 x 与 x 匹配，如下所示：[routerlink]='/x' path: 'x', component: NewInvestigationComponent 其中 x 对我来说是“NewInvestigation”。我没有意识到编译器使用的路径，但我认为我看到它检查 HTML 中的路径，然后使用路由模块查看路径引用的组件。

【解决方案2】：

我实际上设法按照我找到 vegibit.com/angular-routing-example 的说明解决了这个问题，不过感谢您的所有帮助。我的问题是我的路由模块没有正确引用我的组件。我没有意识到我必须将 x 与 x 匹配，如下所示：

组件.html： [routerlink]='/x'

路由模块： { 路径：'x'，组件：NewInvestigationComponent}

x 对我来说是“NewInvestigation”。我没有意识到编译器使用的路径，但我认为我看到它检查路径的 HTML，然后使用路由模块查看路径引用的组件。 ——

【讨论】：