• 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
201 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 (83,100 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 (83,100 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ź 128 wizyt
0 głosów
0 odpowiedzi 61 wizyt
pytanie zadane 7 kwietnia 2018 w JavaScript, jQuery, AJAX przez pulson666 Stary wyjadacz (12,580 p.)
0 głosów
1 odpowiedź 72 wizyt
Porady nie od parady
Publikując kody źródłowe korzystaj ze specjalnego bloczku koloryzującego składnię (przycisk z napisem code w edytorze). Nie zapomnij o ustawieniu odpowiedniego języka z rozwijanego menu oraz czytelnym formatowaniu kodu.Przycisk code

67,206 zapytań

114,160 odpowiedzi

241,962 komentarzy

46,183 pasjonatów

Przeglądających: 120
Pasjonatów: 1 Gości: 119

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.

...