Question

我希望点击链接重定向到其他页面。为此我尝试了下面的代码：

home.component.html

<a [routerLink]="['/datalineage']">
Click Here
</a>

app-routing.module.ts

import { DatalineageComponent } from './datalineage/datalineage.component';

const appRoutes: Routes = [
    { path: 'datalineage', component: DatalineageComponent, data: { title: 'Test' } }
];

@NgModule({
    imports: [
        RouterModule.forRoot(
            appRoutes, { enableTracing: true }
        )
    ],
    exports: [
        RouterModule
    ],
    providers: []
})

datalineage.component.ts

import 'rxjs/add/operator/switchMap';
import { Observable } from 'rxjs/Observable';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';

@Component({
  selector: 'app-datalineage',
  templateUrl: './datalineage.component.html',
  styleUrls: ['./datalineage.component.css']
})
export class DatalineageComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

但它没有转到点击的页面，它在URL中显示http://localhost:4200/datalineage但它仍保留在同一页面上。可能是什么问题？

Answer 1

导航模板。
<h1>Working Routing</h1> <nav> <a [routerLink]=" ['./'] " routerLinkActive="active">Home</a> <a [routerLink]=" ['./datalineage'] " routerLinkActive="active">Data Lineage</a> </nav> <router-outlet></router-outlet>
app.routing模板：

import { HomeComponent } from './home/home.component';
import { DatalineageComponent } from './datalineage/datalineage.component';

const appRoutes: Routes = [
    { path: 'home', component: HomeComponent },
    { path: 'datalineage', component: DatalineageComponent },
    { path: '', redirectTo: 'home' }
];

app.module模板：

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes, { enableTracing: true })
    ],
    exports: [
        RouterModule
    ],
    providers: []
})

参考：https://angular.io/guide/router

有关如何在组件之间传递数据，请检查以下来源：

How do I pass data to Angular routed components?

https://angular.io/guide/component-interaction

以角度4重定向到另一页面

1 个答案: