关于路由到具有特定 ID 的另一个页面的建议

Question

我是 Angular 的新手，我正在创建一个完整的 MEAN 堆栈。我需要一些关于我面临的问题的建议。我想创建一个表单，'fa-daform.component.html,'，它提供了一个简短的描述、作者和日期，该表单存储到具有随机生成的 ID 的数据库中。我想要这样，当我点击 submit/a 创建表单按钮时，它会路由到一个新页面， 'detailed-daform.component.html,' 以获得更详细的表单，但输入的数据 ID 用于简要说明、作者和日期以备将来使用。

简要说明HTML 文件：fa-daform.component.html:

<div>
    <mat-toolbar class = "menu" color="primary">
        
        <div class="centerNavBar">
            <a mat-button href="fa-dashboard">Back</a>
            &nbsp;
            <span class="headSpacer">Damage Assessment Tool</span>        
            &nbsp;
            <a mat-button href="">Logout</a>
        </div>
    </mat-toolbar>
</div>

<div>
    <mat-sidenav-container>
        <mat-sidenav mode="side" opened>
            <div>
                <a mat-button href="fa-dashboard">Dashboard</a>
            </div>
            <div>
                <a mat-button href="fa-daform">Report</a>
            </div>
            <div>
                <a mat-button href="fa-search">Stored Data</a>
            </div>
        </mat-sidenav>
        <mat-sidenav-content>
            <div class="sect">
                <h1>Damage Assessment Report</h1>
            </div>
            <mat-card>
                <mat-card-header>Create report:</mat-card-header>
                <br><br>
                <mat-card-content>
                    <div> 
                        <mat-form-field>
                            <mat-label>Report Description</mat-label>
                            <input
                                #DescOfReportInput  
                                placeholder="Description of Report"
                                matInput type= "string"
                                required>
                        </mat-form-field>
                            <br>
                        <mat-form-field>
                            <mat-label>Author</mat-label>
                            <input  
                                #AuthorInput
                                placeholder="Author"
                                matInput type= "string"
                                required>
                        </mat-form-field>
                        <br>
                        <mat-form-field>
                        <mat-label></mat-label>
                        <input  
                                #DateInput
                                placeholder="----/--/--"
                                matInput type= "Date"
                                required>
                        </mat-form-field>
                        <br>
                    </div>
                    <div>
                        <button mat-raised-button 
                        type="submit" 
                        (click)="createDamageAssessmentReport(DescOfReportInput.value, AuthorInput.value, DateInput.value)" 
                        color="primary" [routerLink]='['/detailed-daform',detailedDAFormID._id]'>Create</button> 
                    </div>
                </mat-card-content>
            </mat-card>
        </mat-sidenav-content>
    </mat-sidenav-container>
</div>

简要说明打字稿文件：fa-daform.component.ts:

import { Component, OnInit } from '@angular/core';
import { DamageAssessmentReportService } from 'src/app/damage-assessment-report.service';

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


  constructor(private damageAssessmentReportService : DamageAssessmentReportService) { }
  
  //assessmentDescription: string, author: string, reportDateTime: Date
  createNewDAReport(){
    this.damageAssessmentReportService.createDAReport("New Report","Dillon", new Date(2020, 9, 10)).subscribe((response : any)=>{
      console.log(response);

    })
  }

  createDamageAssessmentReport(assessmentDescription: string, author: string, reportDateString: string){

    const reportDateTime = new Date(reportDateString); // Here you should have your date ready to be used as you wish
    this.damageAssessmentReportService.createDAReport(assessmentDescription,author, reportDateTime).subscribe((response : any)=>{
      console.log(response);
      //navigate to /damageAssessments/damageAssessments._id
  })
  }

  
  ngOnInit(): void {
  }

  }

详细表格HTML文件：详细-daform.component.html:

<p>detailed-daform works!</p>

详细表格打字稿文件：详细-daform.component.ts:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { DamageAssessmentReportService } from 'src/app/damage-assessment-report.service';

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

  damageAssessments: any;

  constructor(private damageAssessmentReportService: DamageAssessmentReportService, private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params.subscribe(
      (params: Params)=>{
        console.log(params);
      }
    )
    this.damageAssessmentReportService.getDAReport().subscribe((damageAssessments: any)=> {
        console.log(damageAssessments);
    });
  }
}

路由模块文件：app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DetailedDaformComponent } from './pages/detailed-daform/detailed-daform.component';
import { FADAFormComponent } from './pages/fa-daform/fa-daform.component';
import { FADashbooardComponent } from './pages/fa-dashbooard/fa-dashbooard.component';
import { FASearchComponent } from './pages/fa-search/fa-search.component';
import { LandingComponent } from './pages/landing/landing.component';




const routes: Routes = [
  {path: "" , redirectTo: "landing", pathMatch: 'full'},
  {path: "detailed-daform" , redirectTo: "detailed-daforms", pathMatch: 'full'},
  {path: "landing" , component: LandingComponent},
  {path: "fa-dashboard" , component: FADashbooardComponent},
  {path: "fa-daform" , component: FADAFormComponent},
  {path: "fa-search" , component: FASearchComponent},
  {path: "detailed-daforms" , component: DetailedDaformComponent},
  {path: "detailed-daforms/:detailedDAFormId" , component: DetailedDaformComponent}
  
    
];

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

我在点击创建按钮时尝试过，但出现此错误“属性 'detailedDAFormID' 在类型 'FADAFormComponent' 上不存在。”

项目 github 它会有所帮助：[https://github.com/DillonRampersad/Damage_Assessment_Tool]

我不太确定该怎么做，我正在查看已激活的路线，但我很困惑。任何帮助将不胜感激

Answer 1

你可以尝试使用Router

 <button mat-raised-button type="submit" 
  (click)="createDamageAssessmentReport(DescOfReportInput.value, AuthorInput.value, DateInput.value)"  color="primary" >Create</button>

打字稿文件简介：fa-daform.component.ts:

import { Component, OnInit } from '@angular/core';
import { DamageAssessmentReportService } from 'src/app/damage-assessment-report.service';
import { Router } from '@angular/router';

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


  constructor(private damageAssessmentReportService : DamageAssessmentReportService, private router: Router) { }
  
  //assessmentDescription: string, author: string, reportDateTime: Date
  createNewDAReport(){
    this.damageAssessmentReportService.createDAReport("New Report","Dillon", new Date(2020, 9, 10)).subscribe((response : any)=>{
      console.log(response);

    })
  }

  createDamageAssessmentReport(assessmentDescription: string, author: string, reportDateString: string){

    const reportDateTime = new Date(reportDateString); // Here you should have your date ready to be used as you wish
    this.damageAssessmentReportService.createDAReport(assessmentDescription,author, reportDateTime).subscribe((damageAssessments : any)=>{
      console.log(damageAssessments);
      //navigate to /damageAssessments/damageAssessments._id
      this.router.navigateByUrl(`damageAssessments/${damageAssessments._id}`)
  })
  }

  
  ngOnInit(): void {
  }

  }

关于路由到具有特定 ID 的另一个页面的建议

Advice on routing to another page with a specific ID

javascript

angular

typescript

mean-stack