Angular 在使用单击的对象进行布线后,返回上一个组件的步骤
我有三个组件Angular 在使用单击的对象进行布线后,返回上一个组件的步骤,angular,angular6,angular-routing,Angular,Angular6,Angular Routing,我有三个组件标题,列表和主页 在标题中,列表组件的路由路径如下所示: <div> <a [routerLink]="['../list']" >List</a> </div> 应用程序路由.module.ts import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { List
标题
,列表
和主页
在标题
中,列表
组件的路由路径如下所示:
<div>
<a [routerLink]="['../list']" >List</a>
</div>
应用程序路由.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ListComponent } from './list/list.component';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
{ path: '', component: ListComponent },
{ path: 'list', component: ListComponent },
{ path: 'home/:id', component: HomeComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule { }
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
public id: string;
public sub: any = {};
constructor(public route: ActivatedRoute) { }
ngOnInit() {
this.sub = this.route.params.subscribe(params => {
this.id = params['id'];
});
console.log(this.id);
}
}
home.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ListComponent } from './list/list.component';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
{ path: '', component: ListComponent },
{ path: 'list', component: ListComponent },
{ path: 'home/:id', component: HomeComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule { }
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
public id: string;
public sub: any = {};
constructor(public route: ActivatedRoute) { }
ngOnInit() {
this.sub = this.route.params.subscribe(params => {
this.id = params['id'];
});
console.log(this.id);
}
}
home.html
<app-header></app-header>
<h2>List Component</h2>
<div *ngFor="let contact of contacts" >
<mat-card [routerLink]="['../home' , contact.id]" >
<h4>{{contact.contactName}}</h4>
<p>{{contact.email}}</p>
</mat-card>
</div>
<app-header></app-header>
<h2>Home Component</h2>
Clicked ID ==> {{id}}
通过添加:
{ path: 'list', component: ListComponent }
因此,您的路线将如下所示:
const routes: Routes = [
{ path: '', component: ListComponent }, -- for default page
{ path: 'list', component: ListComponent },
{ path: 'home/:id', component: HomeComponent },
];
和HTML代码:
<div>
<a [routerLink]="['/list']">List</a>
</div>
根据您的要求使用路由器插座
,并在app.component.html中移动应用标题
。