如何使用routerLink将用户数据传递给其他组件

Question

我用烧瓶以角度工作。我有包含教师名单的数据库 我可以在 Teachers.component.html 中显示教师列表。 目标：当我按下给定用户的按钮时，我希望网站通过显示 routerLink 的新组件来向我显示包含该教师数据的用户配置文件。我的

teacher.component.html:

<div *ngFor="let teacher of teachersList">
  <button (click)="teachersave(teacher.title)" routerLink="teacher" >Show teacher</button> {{teacher.title}}
 </div>

teacher.component.ts:

import {Component, Input, OnInit, Output} from '@angular/core';

import {Subscription} from "rxjs";
import {Teachers} from "../../teachers.model";
import {TeachersApiService} from "../../api.services";


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


  teachersListSubs: Subscription = new Subscription;
  teachersList: Teachers[] = [];
  teacher: Teachers = new Teachers('','');
  
  constructor(private teachersApi: TeachersApiService) {
  }



teachersave(event:string){
    this.title2 = event}
  title2 = this.teacher.title
  ngOnInit() {
    this.teachersListSubs = this.teachersApi.getTeachers().subscribe({
        next: res => this.teachersList = res,
        error: console.error
      }
    )
  }
  ngOnDestroy() {
    this.teachersListSubs.unsubscribe();
    
  }
}

teacher.Component.ts

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

import * as ts from 'src/management/teachers/teachers.component'
import {ActivatedRoute} from "@angular/router";


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

  title3 = ts.TeachersComponent.arguments.title2 // <------??????????


  ngOnInit(): void {

  }

}

Teacher.component.html

<div>
{{title3}}
<router-outlet></router-outlet>
</div>

有一些操作方式，使用Linkrouter传输数据库对象数据到其他组件

Answer 1

教师.component.html:

<div *ngFor="let teacher of teachersList">
  <button (click)="teachersave(teacher.title)">Show teacher</button> {{teacher.title}}
 </div>

教师.component.ts:

   import {Component, Input, OnInit, Output} from '@angular/core';
    
    import {Subscription} from "rxjs";
    import {Teachers} from "../../teachers.model";
    import {TeachersApiService} from "../../api.services";
    
    
    @Component({
      selector: 'app-teachers',
      templateUrl: './teachers.component.html',
      styleUrls: ['./teachers.component.css']
    })
    export class TeachersComponent implements OnInit {
    
    
      teachersListSubs: Subscription = new Subscription;
      teachersList: Teachers[] = [];
      teacher: Teachers = new Teachers('','');
      
      constructor(private teachersApi: TeachersApiService) {
      }
    
    
    
    teachersave(event:string){
        this.title2 = event
 this.router.navigate([`/teacher`],
      {
        state: {
          data: {
           title:teacher.title
          }
        }
      });
}


      title2 = this.teacher.title
      ngOnInit() {
        this.teachersListSubs = this.teachersApi.getTeachers().subscribe({
            next: res => this.teachersList = res,
            error: console.error
          }
        )
      }
      ngOnDestroy() {
        this.teachersListSubs.unsubscribe();
        
      }
    }

教师.Component.ts

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

import * as ts from 'src/management/teachers/teachers.component'
import {ActivatedRoute} from "@angular/router";


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

  title3 = history.state?.data?.title;


  ngOnInit(): void {

  }

}