Question

我一直在努力进行这项工作，并且进行了许多研究，但找不到答案。我正在创建一个角度为2+的具有多个路线出口的应用程序。

我有这个：

App.Component.html

<div>
<div>
<nav mat-tab-nav-bar>
  <a mat-tab-link
     *ngFor="let link of navLinks"
     [routerLink]="{ outlets: {form: link.path } }"
     routerLinkActive="active-link" #rla="routerLinkActive"
     [active]="rla.isActive">
    <span><mat-icon>{{link.icon}}</mat-icon></span>
    <span>{{link.label}}</span>
  </a>
</nav>
    <router-outlet name="form"></router-outlet>
</div>
</div>




 <router-outlet></router-outlet>

app.module.ts

const appRoutes: Routes = [
  { path: 'home', component: HomeComponent,
    children: [
      { path: "hotel",  component: HotelSearchFormApiComponent, outlet:"form"},
      { path: "groups", component: GroupRequestFormComponent, outlet:"form"},
      { path: "flight", component: flightsSearchFormComponent, outlet:"form"},
      { path: "", component: HomeComponent},
      //{ path: "", redirectTo: "hotel", pathMatch: "full" },
      { path: "**", redirectTo: "hotel" },
    ]
   },
  { path: 'hotel/rate',      component:  RatesComponent },
  { path: 'hotel/:countryCod/:stateCod/:cityCod/:dateFrom/:dateTo',      component:  SearchHotelResultComponent },

App.component.ts

navLinks = [
{
    path:'./home/hotel',
    icon: 'hotel',
    label:   'Hoteles'
},
{
    path:'/home/flight',
    icon:'flight',
    label: 'Vuelos'
}
,
{
    path:'./home/Package',
    icon:'work',
    label: 'Paquetes'
}
,
{
    path:'./home/groups',
    icon:'group',
    label: 'Grupos'
}
]

但是当我单击按钮时，出现了这个问题：

error: Error: Cannot match any routes. URL Segment: '/home/flight' at ApplyRedirects.push.../../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (http://localhost/a/vendor.js:140670:16) at CatchSubscriber.selector (http://localhost/a/vendor.js:140651:29) at CatchSubscriber.push.../../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (http://localhost/a/vendor.js:181982:31) at MapSubscriber.push.../../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (http://localhost/a/vendor.js:178721:26) at MapSubscriber.push.../../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (http://localhost/a/vendor.js:178701:18) at MapSubscriber.push.../../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (http://localhost/a/vendor.js:178721:26) at MapSubscriber.push.../../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (http://localhost/a/vendor.js:178701:18) at MapSubscriber.push.../../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (http://localhost/a/vendor.js:178721:26) at MapSubscriber.push.../../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (http://localhost/a/vendor.js:178701:18) at TapSubscriber.push.../../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (http://localhost/a/vendor.js:186715:26)
message: "Cannot match any routes. URL Segment: '/home/flight'"
stack: "Error: Cannot match any routes. URL Segment: '/home/flight'↵    at ApplyRedirects.push.../../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (http://localhost/a/vendor.js:140670:16)↵    at CatchSubscriber.selector (http://localhost/a/vendor.js:140651:29)↵    at CatchSubscriber.push.../../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (http://localhost/a/vendor.js:181982:31)↵    at MapSubscriber.push.../../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (http://localhost/a/vendor.js:178721:26)↵    at MapSubscriber.push.../../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (http://localhost/a/vendor.js:178701:18)↵    at MapSubscriber.push.../../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (http://localhost/a/vendor.js:178721:26)↵    at MapSubscriber.push.../../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (http://localhost/a/vendor.js:178701:18)↵    at MapSubscriber.push.../../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (http://localhost/a/vendor.js:178721:26)↵    at MapSubscriber.push.../../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (http://localhost/a/vendor.js:178701:18)↵    at TapSubscriber.push.../../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (http://localhost/a/vendor.js:186715:26)"
__proto__: Object
id: 3
url: "/home(form:/home/flight)"

此外，/ Home不会重定向到home / hotel。

我以前只有一个插座，并且工作无瑕：（。

谢谢。

安德烈斯

Answer 1

这里的问题是您试图导航到不存在的路线。让我在这里多解释一下，您有一条名为“ home”的路线，可以这样说：

export const HomeRoutes:Routes=[
{path:'home', component:HomeComponent}
];

这将带您进入主页。

现在在您的主页中，您想要一个新的<router-outlet></router-outlet>，它将允许您拥有/home的子代。您将需要将孩子添加到路线。看起来可能像这样：

export const HomeRoutes:Routes=[
{path:'home', component:HomeComponent, children:[
    {path:'groups', component:GroupsComponent}
]}
];

现在，如果您转到/home/groups，则实际上将导航到home组件内部的HomeComponent和GroupsComponent两个组件。

任何您想要的东西都可以拥有。

希望这可以解释得更好。

完整文档为Here

Answer 2

您似乎未未初始化变量let result = await cloudinary.v2.uploader.upload(file.path, {width: 1280, height: 720, crop: "limit"});。您需要将其添加到App模块的import块中。

appRoutes

Angular 2+中的多条路线

2 个答案: