Question

我正在尝试从一个组件导航到另一个组件，但是没有任何工作对我有用。我也尝试过routerLink，但是也没有用。

下面是我的explorer.components.ts文件：

import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';

@Component({
  selector: 'app-explore',
  templateUrl: './explore.component.html',
  styleUrls: ['./explore.component.css']
})

export class ExploreComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
  }

  onClick() {
    this.router.navigate(['/submit']);
  }
}

这是我的explorer.html文件。单击该按钮应该显示“提交”组件。

<button type="button" class="btn" (click) = "onClick()">Click here to submit your work <i class="fa fa-hand-peace-o fa-lg"></i></button>

这两个组件都是应用程序组件的子代。

Answer 1

立即尝试：

const ROUTES: Routes = [ {path:'', component: HomeComponent},
{path:'sign-up', component: SignUpComponent},
{path:'login', component: LoginComponent},
{path:'contact',component:ContactComponent}, 
{path:'submit',component: SubmitComponent}, 
{path:'explore', component:ExploreComponent} ]

您没有可以导航到拥有的提交组件的路由，现在您可以从任何其他组件导航到该组件。

Answer 2

您应该具有诸如component-routing-module.ts或app-routing.module.ts之类的东西

如果没有它，请使用角度cli生成它。

ng generate module SomeModule --routing (or ng g m SomeModule --routing, for short)

这是一个示例路由模块。该路由的目标是https：yoursite / dashboard / mydashboardtypevalue

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
import { DashboardContainerComponent } from './dashboard-    container/dashboard-container.component';
import { RequiredAuthenticatedUserRouteGuardService } from '../shared/services/required-authenticated-user-route-guard/required-authenticated-user-route-guard.service';

const routes: Routes = [{
  path: 'dashboard',
  component: DashboardComponent,
  canActivate: [ RequiredAuthenticatedUserRouteGuardService ],
  children: [
{ path: ':dashboardType', component: DashboardContainerComponent } // this is a sample required parameter

  ]},
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
 })
export class DashboardRoutingModule { }

错误：无法匹配任何路线。网址段：“提交”

2 个答案: