Question

基本上，我想要的是具有人类可读的路由名称，而不是网址中的长猫鼬。

例如：代替：https://localhost/campgrounds/50341373e894ad16347efe01

我要：https://localhost/campgrounds/mountain-view

其中“ mountain-view”将是用户将在表单字段中输入的营地名称。

这是我的界面：

campgrounds.model.ts

export interface Campground {
_id: String;
name: String;
routeURL: String;
description: String;
cost: Number;
}

campground-create.component.html （我没有发布其他表单字段，因为这里没有必要）

<div class="container">
 <form>
  <div class="form-group">
  <label for="name">Name</label>
  <input type="text" class="form-control" id="name" name="name"
  [(ngModel)]="campground.name" (blur)="generateURL()" required>
  </div>

  <button type="submit" class="btn btn-primary" 
  (click)="addCampground()">Submit</button>
 </form>
</div>

campground-create.component.ts

这只是转换用户在表单字段中输入的营地名称，并在调用（blur）时在单词之间添加连字符。

import { Component, OnInit } from '@angular/core';
import { CampgroundService } from 'src/app/campground.service';
import { Router } from '@angular/router';
import { Campground } from 'src/app/campground.model';

@Component({
selector: 'app-campground-create',
templateUrl: './campground-create.component.html',
styleUrls: ['./campground-create.component.sass']
})

export class CampgroundCreateComponent implements OnInit {

  campground: Campground = {} as Campground;

  constructor(private campgroundService: CampgroundService, private 
  router: Router) { }

  ngOnInit() {
  }

  generateURL() {
  this.campground.routeURL = this.campground.name.toLowerCase()
  .trim().split(/\s+/).join('-');
  // Retrieve campground name and add hyphens between words
  }

  addCampground() {
  this.campgroundService.addCampground(this.campground)
  .subscribe(()=> {
   this.generateURL();
   this.router.navigate(['/campground-list']);
  });
 }
}

campground-list.component.html

<div class="background">

 <header class="jumbotron jumbotron-fluid">
 <div class="container">
  <h1 class="display-4 title">Welcome to YelpCamp!</h1>
  <button type="button" [routerLink]="['/campground-create']" 
  class="btn btn-default btn-lg">Add New Campground</button>
 </div>
 </header>

 <div class="card-deck">
  <div class="card" *ngFor="let campground of campgrounds">
  <img class="card-img-top" src="{{campground?.imageURL}}" alt="Card 
  image cap">
   <div class="card-body">
    <h5 class="card-title">{{campground?.name}}</h5>
    <button type="button" routerLink="/campground- 
    details/{{campground.routeURL}}"
    class="btn btn-danger">More Info</button>
   </div>
  </div>
 </div>

</div>

但是，由于我使用的是“ findById”，因此不会返回营地详细信息页面的服务数据。

campground-routes.js

router.get('/api/campground/:id', (req, res) => {
  Campground.findById(req.params.id, (err, campground) => {
  if (err) {
  console.log(err);
  } else {
   res.json(campground);
  }
 });
});

如果我在路线中有猫鼬ID，则可以使用以下内容：

campground-details.component.ts

import { Component, OnInit } from '@angular/core';
import { CampgroundService } from 'src/app/campground.service';
import { ActivatedRoute } from '@angular/router';
import { Campground } from 'src/app/campground.model';

@Component({
selector: 'app-campground-details',
templateUrl: './campground-details.component.html',
styleUrls: ['./campground-details.component.sass']
})

export class CampgroundDetailsComponent implements OnInit {

  campground: Campground;

  constructor(private campgroundService: CampgroundService, private 
  router: ActivatedRoute) {
  }

  ngOnInit() {
   this.router.params.subscribe(params => {
   const id = params['id'];

   this.campgroundService.getCampground(id).subscribe(campground=> {
   this.campground = campground;
   console.log(this.campground);
   });
  });
 }
}

有没有办法做到这一点？如果是，是否有简单的方法？谢谢。

Answer 1

您是否正在使用当前版本的Angular？从Angular v7.2开始，您可以在路由上发送state属性。

然后您可以在URL中发送名称，在state属性中发送ID。

有关使用路由的state功能的更多信息，请参见以下链接：https://netbasal.com/set-state-object-when-navigating-in-angular-7-2-b87c5b977bb

类似这样的东西：

<button type="button" 
        routerLink="/campground-details/{{campground.name }}"
        [state]="{ id: campground.id }"
        class="btn btn-danger">
  More Info
</button>

如何在网址中使用易于理解的名称而不是Angular中的id？

1 个答案: