代码之家 › 专栏 › 技术社区 › o elhajoui

角度7-通过URL导航到动态路线

angular7 rxjs angular

0

o elhajoui · 技术社区 · 6 年前

我想添加从我的api返回的新路由。但这些线路没有按时登记。当我导航到例如/ http://localhost:4200/iphone-7 这将带我进入404页面,但是当我使用 <a [routerLink]="['iphone-7']">this</a> 那就行了。如何确保我的角形应用程序按时注册路线?

app-routing.module.ts程序

import { NgModule } from '@angular/core';
import { Routes, RouterModule, Router } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ReparationMainComponent } from './reparation-main/reparation-main.component';
import { BrandSelectionComponent } from './reparations/brand-selection/brand-selection.component';
import { ModelSelectionComponent } from './reparations/model-selection/model-selection.component';
import { RepairSelectionComponent } from './reparations/repair-selection/repair-selection.component';
import { PriceSelectionComponent } from './reparations/price-selection/price-selection.component';
import { ConfirmSelectionComponent } from './reparations/confirm-selection/confirm-selection.component';
import { NotFoundComponent } from './not-found/not-found.component';
import { RestfulService } from './helpers/restful/restful.service'



var routesMain: Routes = [
  { path: "", component: HomeComponent },
  { path: "reparatie", component: ReparationMainComponent },
  { path: "reparatie/:device/merk", component: BrandSelectionComponent },
  { path: "reparatie/:device/:brand/model", component: ModelSelectionComponent },
  { path: "reparatie/:device/:brand/:model/soort", component: RepairSelectionComponent },
  { path: "reparatie/:device/:brand/:model/:repair/pakket", component: PriceSelectionComponent },
  { path: "reparatie/:device/:brand/:model/:repair/:package/bevestig", component: ConfirmSelectionComponent },
  { path: '404', component: NotFoundComponent },
  { path: '**', redirectTo: '/404' }
];

@NgModule({
  imports: [RouterModule.forRoot(routesMain)],
  exports: [RouterModule]
})
export class AppRoutingModule {
  constructor(
    private restfullService: RestfulService,
    private router: Router
  ) {
    var routes: Routes = [];
    restfullService.GetWithoutToken("pagina/all").subscribe((observer: Object[]) => {
      observer.forEach(element => {
        let title: string = element["titel"];
        title = title.trim().replace(/ /g, "-").toLowerCase();
        let newRoute = { path: title, component: HomeComponent };
        routes.unshift(newRoute);
      });
      this.router.resetConfig([...routes, ...this.router.config]);
    })

  }
}

restfull.service.ts=>调用我的API

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class RestfulService {

  constructor(private httpClient: HttpClient) { }

  private API_URL: string = "http://localhost:5353/api/";

  GetWithoutToken(endpoint) {
    return this.httpClient.get(`${this.API_URL}${endpoint}`);
  }
}

我的应用程序没有任何进一步的修改,它是用ng new标准生成的

附笔这在routes变量中

1 回复 | 直到 6 年前

1

rijin 6 年前

尝试添加一个具有相同组件的多个路由。

用警卫更新路线

{ path: '', component: HomeComponent, pathMatch: 'full' },
{ path: ':id', component: HomeComponent, canActivate: [ProductsGuards] },

增加警卫

@Injectable()
export class ProductsGuards implements CanActivate {
  constructor(private restfulService: RestfulService) {}

  canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
    return this.restfulService.findProduct(route.params.id).pipe(
      map(isFound => {
        if (isFound) {
          return true;
        } else {
          // router.navigate('')
          // Navigate to 404.
          // Make sure that dont use /404 otherwise it will go in cycle
          // or change product route to some other route.
          // like http://localhost:4200/iphone-xs-max-reparatie
          // to http://localhost:4200/products/iphone-xs-max-reparatie

        }
      })
    );
  }
}

使用以下功能更新您的服务

findProduct(productFromUrl: string) {
    return this.getProducts().pipe(
      map((products: Product[]) => {
        return products.filter(
          product =>
            product.seoTextTitel
              .toLowerCase()
              .split(' ')
              .join('-') === productFromUrl
        );
      }),
      take(1),
      map(product => !!product)
    );
  }

  getProducts() {
    return this.httpClient.get('http://ros.azurewebsites.net/api/pagina/all');
  }