Angular pass 将数据解析为子路由

# 使用Angular路由传递数据并解析为子路由的方法

typescript
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ParentComponent } from './parent/parent.component';
import { ChildComponent } from './child/child.component';
const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      {
        path: 'child',
        component: ChildComponent,
      },
    ],
  },
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

typescript
// parent.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'app-parent',
  template: `
    
Parent Component
    Go to Child
  `,
})
export class ParentComponent {
  constructor(private router: Router) {}
  navigateToChild() {
    const dataToSend = { message: 'Hello from Parent!' };
    this.router.navigate(['parent', 'child'], { state: dataToSend });
  }
}

typescript
// child.component.ts
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-child',
  template: `
    
Child Component
    
      
Data from Parent: {{ receivedData?.message }}
    
  `,
})
export class ChildComponent {
  receivedData: any;
  constructor(private route: ActivatedRoute) {
    this.receivedData = this.route.snapshot.state;
  }
}