[英]How can I successfully route to my other components in 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 { }
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
选项,但我不确定如何。
先生,您使用的是路由,而不是元素<router-outlet></router-outlet>
路由器出口标签将相应地呈现导航组件。 您需要将其放置在要呈现导航组件的位置!
我实际上按照我找到的说明设法解决了它 vegibit.com/angular-routing-example 感谢您的所有帮助。 我的问题是我的路由模块没有正确引用我的组件。 我没有意识到我必须将 x 与 x 匹配,如下所示:
Component.html: [路由器链接]='/x'
路由模块:{路径:'x',组件:NewInvestigationComponent}
其中 x 对我来说是“NewInvestigation”。 我没有意识到编译器使用的路径,但我认为我看到它检查了路径的 HTML,然后使用路由模块查看路径引用了哪个组件。 ——
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.