• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Angular 4 - problem z childRoute

0 głosów
177 wizyt
pytanie zadane 23 sierpnia 2017 w JavaScript, jQuery, AJAX przez Perkos Początkujący (290 p.)
zamknięte 30 października 2017 przez Perkos

Witam,

Mój problem polega na tym, że gdy używam 'children'  w path to nie ładują się komponenty (treść) dzieci (sciezka w pasku działa poprawnie, dodaje nazwe ładowanego komponentu). Gdy sieżka ustawiona jest jako główna, komponent ładuje się bez problemu.  Błąd który wystepuje: 


vendor.bundle.js:64655 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'restaurtant-detail/0'
Error: Cannot match any routes. URL Segment: 'restaurtant-detail/0'
    at ApplyRedirects.webpackJsonp.../../../router/@angular/router.es5.js.ApplyRedirects.noMatchError (vendor.bundle.js:115782)
    at CatchSubscriber.selector (vendor.bundle.js:115757)
    at CatchSubscriber.webpackJsonp.../../../../rxjs/operator/catch.js.CatchSubscriber.error (vendor.bundle.js:13123)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._error (vendor.bundle.js:11158)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.error (vendor.bundle.js:11132)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._error (vendor.bundle.js:11158)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.error (vendor.bundle.js:11132)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._error (vendor.bundle.js:11158)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.error (vendor.bundle.js:11132)
    at LastSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._error (vendor.bundle.js:11158)
    at ApplyRedirects.webpackJsonp.../../../router/@angular/router.es5.js.ApplyRedirects.noMatchError (vendor.bundle.js:115782)
    at CatchSubscriber.selector (vendor.bundle.js:115757)
    at CatchSubscriber.webpackJsonp.../../../../rxjs/operator/catch.js.CatchSubscriber.error (vendor.bundle.js:13123)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._error (vendor.bundle.js:11158)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.error (vendor.bundle.js:11132)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._error (vendor.bundle.js:11158)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.error (vendor.bundle.js:11132)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._error (vendor.bundle.js:11158)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.error (vendor.bundle.js:11132)
    at LastSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._error (vendor.bundle.js:11158)
    at resolvePromise (polyfills.bundle.js:3198)
    at resolvePromise (polyfills.bundle.js:3169)
    at polyfills.bundle.js:3246
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:2839)
    at Object.onInvokeTask (vendor.bundle.js:67516)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:2838)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (polyfills.bundle.js:2606)
    at drainMicroTaskQueue (polyfills.bundle.js:3010)
    at <anonymous>

Kod: 

app.routing.module.ts

import { NgModule, ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { SignupComponent } from './auth/signup/signup.component';
import { RestaurantComponent } from './restaurant/restaurant.component';
import { RestaurantDetailComponent } from './restaurant/restaurant-detail/restaurant-detail.component';
import { RestaurantInformationComponent } from './restaurant/restaurant-detail/restaurant-information/restaurant-information.component';





const appRoutes: Routes = [
   { path: '', component: HeaderComponent },
   { path: 'signup', component: SignupComponent, data: { breadcrumb: 'Sign Up'}},
   { path: 'restaurant', component: RestaurantComponent,  data: { breadcrumb: 'Restaurant'}, children: [
    { path: 'restaurtant-detail/:id', component: RestaurantDetailComponent, data: { breadcrumb: 'Restaurant-detail' }},
   ]},

];

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes)
    ],
    exports: [
        RouterModule
    ]
})


export class AppRoutingModule {}
// export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

 

component.html 

<div class="row">
  <div class="col-xs-12">
    <!-- <a (click)="onSelected()" role="button" class="list-group-item clearfix"> -->
    <a [routerLink]="['restaurtant-detail', index]"style="cursor: pointer" class="list-group-item clearfix">
      <div class="pull-left">
        <h4 class="list-group-item-heading">{{ restaurant.name }}</h4>
        <p class="list-grup-item-text">{{ restaurant.description }}</p>
      </div>
      <span class="pull-right">
        <img src="{{ restaurant.imagePath }}" alt="" class="img-responsive" style="max-height: 50px;">
      </span>
    </a>
  </div>
</div>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BreadcrumbComponent } from './shared/breadcrumb/breadcrumb.component';
import { HeaderComponent } from './header/header.component';
import { SearchComponent } from './body/search/search.component';
import { BodyComponent } from './body/body.component';
import { ToptenComponent } from './body/topten/topten.component';
import { NavbarComponent } from './navbar/navbar.component';
import { FooterComponent } from './footer/footer.component';
import { ContactComponent } from './footer/contact/contact.component';
import { SignupComponent } from './auth/signup/signup.component';
import { SigninComponent } from './auth/signin/signin.component';
import { InformationComponent } from './body/information/information.component';
import { RestaurantComponent } from './restaurant/restaurant.component';
import { RestaurantItemComponent } from './restaurant/restaurant-list/restaurant-item/restaurant-item.component';
import { RestaurantListComponent } from './restaurant/restaurant-list/restaurant-list.component';
import { RestaurantDetailComponent } from './restaurant/restaurant-detail/restaurant-detail.component';
import { RestaurantInformationComponent } from './restaurant/restaurant-detail/restaurant-information/restaurant-information.component';
import {Ng2PageScrollModule} from 'ng2-page-scroll';
import { IonRangeSliderModule } from 'ng2-ion-range-slider';
import { DropdownDirective } from './shared/dropdown.directive';
import { ProgressBarDirective } from './shared/progress-bar.directive';
import { MdSliderModule,
  MdIconModule,
  MdSelectModule,
  MdDatepickerModule,
  MdNativeDateModule,
  MdInputModule,
  MdButtonModule} from '@angular/material';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import 'hammerjs';
import { MapsComponent } from './restaurant/restaurant-detail/restaurant-information/maps/maps.component';
import { AgmCoreModule } from '@agm/core';


@NgModule({
  declarations: [
    AppComponent,
    BreadcrumbComponent,
    HeaderComponent,
    SignupComponent,
    SigninComponent,
    SearchComponent,
    BodyComponent,
    ToptenComponent,
    NavbarComponent,
    ContactComponent,
    InformationComponent,
    RestaurantComponent,
    DropdownDirective,
    ProgressBarDirective,
    RestaurantItemComponent,
    RestaurantListComponent,
    RestaurantDetailComponent,
    RestaurantInformationComponent,
    FooterComponent,
    MapsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    Ng2PageScrollModule,
    MdSliderModule,
    MdIconModule,
    MdSelectModule,
    MdDatepickerModule,
    MdNativeDateModule,
    MdInputModule,
    MdButtonModule,
    BrowserAnimationsModule,
    AgmCoreModule.forRoot({
      apiKey: ''
    })
  ],
  entryComponents: [
    SigninComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Będę wdzięczny za wszelką pomoc.

komentarz zamknięcia: Problem rozwiązany
komentarz 23 sierpnia 2017 przez JSHolic Szeryf (77,560 p.)

Cannot read property 'component' of null at

Jaka jest dalsza część błędu? Jest tam wskazanie na miejsce, gdzie występuje problem.

komentarz 23 sierpnia 2017 przez Perkos Początkujący (290 p.)
Zaktualizowane
komentarz 23 sierpnia 2017 przez JSHolic Szeryf (77,560 p.)

'restaurtant-detail/0'

Masz tam jakąś literówkę restaurtant restaurant - sprawdź, może w tym tkwi problem.

komentarz 23 sierpnia 2017 przez Perkos Początkujący (290 p.)
Literówka była, ale w routerLink i path więc nie maiła to wpływu. Po zmianie nadla ten sam błąd.

Problem tkwi gdzieś w children. Bo jeśli ustawie restaurant-detail jako osobną scieżkę to działa bez prblemu. Zależy mi na tym bo mam breadcrumb na stronie.
komentarz 23 sierpnia 2017 przez Perkos Początkujący (290 p.)
edycja 24 sierpnia 2017 przez Perkos
Częściowo znalazłem rozwiązanie, musiałem dodać <router-outlet></router-outlet> w component.html. W tym momencie komponent dziecka ładuje się w komponencie rodzica. Jak zrobić żeby ładował się tak jak by był główną sieżką (bez rodzica), czy jest w ogóle taka możliwość?

Podobne pytania

0 głosów
1 odpowiedź 96 wizyt
0 głosów
0 odpowiedzi 54 wizyt
pytanie zadane 7 kwietnia 2018 w JavaScript, jQuery, AJAX przez pulson666 Stary wyjadacz (10,560 p.)
0 głosów
1 odpowiedź 67 wizyt
Porady nie od parady
Wynikowy wygląd pytania, odpowiedzi czy komentarza, różni się od tego zaprezentowanego w edytorze postów. Stosuj więc funkcję Podgląd posta znajdującą się pod edytorem, aby upewnić się, czy na pewno ostateczny rezultat ci odpowiada.Podgląd posta

62,275 zapytań

108,402 odpowiedzi

226,285 komentarzy

34,906 pasjonatów

Przeglądających: 228
Pasjonatów: 4 Gości: 224

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...