如何成功路由到 Angular 中的其他組件？

Question

我對 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選項，但我不確定如何。

Answer 1

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

路由器出口標簽將相應地呈現導航組件。 您需要將其放置在要呈現導航組件的位置！

Answer 2

我實際上按照我找到的說明設法解決了它 vegibit.com/angular-routing-example 感謝您的所有幫助。 我的問題是我的路由模塊沒有正確引用我的組件。 我沒有意識到我必須將 x 與 x 匹配，如下所示：

Component.html: [路由器鏈接]='/x'

路由模塊：{路徑：'x'，組件：NewInvestigationComponent}

其中 x 對我來說是“NewInvestigation”。 我沒有意識到編譯器使用的路徑，但我認為我看到它檢查了路徑的 HTML，然后使用路由模塊查看路徑引用了哪個組件。 ——

如何成功路由到 Angular 中的其他組件？

問題描述

2 個解決方案

解決方案1
0 2020-09-15 21:59:26

解決方案2
0 2020-09-15 23:25:27

如何成功路由到 Angular 中的其他組件？

問題描述

2 個解決方案

解決方案1 0 2020-09-15 21:59:26

解決方案2 0 2020-09-15 23:25:27

解決方案1
0 2020-09-15 21:59:26

解決方案2
0 2020-09-15 23:25:27