RouterLink nie działa

Mój routing w aplikacjach angular2 działa dobrze. Ale mam zamiar utworzyć na podstawie tego routeLink :

Oto mój routing:

const routes: RouterConfig = [
    { path:'home' , component: FormComponent  },
    { path:'about', component: AboutComponent },
    { path:'**'   , component: FormComponent  }
];

A oto linki, które stworzyłem:

<ul class="nav navbar-nav item">
                    <li>
                        <a routerLink='/home' routerLinkActive="active">Home</a>
                    </li>
                    <li>
                        <a routerLink='/about' routerLinkActive="active">About this</a>
                    </li>
</ul>

Spodziewam się, że po ich kliknięciu przechodzi do szanowanego komponentu, ale nic nie wykonują?

Kod, który tam pokazujesz, jest absolutnie poprawny.

Podejrzewam, że problem polega na tym, że nie importujesz RouterModule (czyli tam, gdzie jest zadeklarowany RouterLink) do modułu, który używa tego szablonu.

Miałem podobny problem i zajęło mi to trochę czasu, ponieważ ten krok nie jest wymieniony w dokumentacji.

Przejdź więc do modułu, który deklaruje komponent za pomocą tego szablonu i dodaj:

import { RouterModule } from '@angular/router';

następnie dodaj go do importu modułów np

@NgModule({
  imports: [
    CommonModule,
    RouterModule
  ],
  declarations: [MyTemplatesComponent]
})
export class MyTemplatesModule { }

Oprócz poprawnych instrukcji importu będziesz potrzebować również miejsca na pokazanie tego routerLink, które znajduje się w <router-outlet></router-outlet>elemencie, więc również musi być umieszczone gdzieś w znaczniku HTML, aby router wiedział, gdzie wyświetlać te dane.

nie zapomnij o tym, aby dodać to poniżej w swoim szablonie:

<router-outlet></router-outlet>

Spróbuj zmienić linki, jak poniżej:

  <ul class="nav navbar-nav item">
    <li>
        <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
    </li>
    <li>
        <a [routerLink]="['/about']" routerLinkActive="active">About this</a>
    </li>
  </ul>

Dodaj również w nagłówku pliku index.html:

<base href="https://stackoverflow.com/">

użyj go w ten sposób, aby uzyskać informacje o mroe przeczytaj ten temat

<a [routerLink]="['/about']">About this</a>

Zdaję sobie sprawę, że to pytanie jest już dość stare i najprawdopodobniej już je naprawiłeś, ale chciałbym opublikować tutaj jako odniesienie dla każdego, kto znajdzie ten post podczas rozwiązywania tego problemu, że tego rodzaju rzecz wygrała nie działa, jeśli tagi kotwicy znajdują się w pliku Index.html. Musi znajdować się w jednym z komponentów

Linki są błędne, musisz to zrobić:

<ul class="nav navbar-nav item">
    <li>
        <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
    </li>
    <li>
        <a [routerLink]="['/about']" routerLinkActive="active">About this
        </a>
    </li>
</ul>

Możesz przeczytać ten samouczek

Użyłem routerlink zamiast routerLink .

Dla każdego mającego ten błąd po rozdzieleniu modułów sprawdź swoje trasy, zdarzyło mi się co następuje:

public-routing.module.ts:

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: '**', redirectTo: 'home' } // ← This was my mistake
    { path: 'home', component: HomeComponent },
    { path: 'privacy-policy', component: PrivacyPolicyComponent },
    { path: 'credits', component: CreditsComponent },
    { path: 'contact', component: ContactComponent },
    { path: 'news', component: NewsComponent },
    { path: 'presentation', component: PresentationComponent }
]

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class PublicRoutingModule { }

app-routing.module.ts:

const routes: Routes = [
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

Przejdź { path: '**', redirectTo: 'home' }do swojego AppRoutingModule:

public-routing.module.ts:

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'home', component: HomeComponent },
    { path: 'privacy-policy', component: PrivacyPolicyComponent },
    { path: 'credits', component: CreditsComponent },
    { path: 'contact', component: ContactComponent },
    { path: 'news', component: NewsComponent },
    { path: 'presentation', component: PresentationComponent }
]

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class PublicRoutingModule { }

app-routing.module.ts:

const routes: Routes = [
    { path: '**', redirectTo: 'home' }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

Jest też inny przypadek, który pasuje do tej sytuacji. Jeśli w swoim przechwytywaczu sprawiłeś, że zwraca wartość inną niż logiczna, wynik końcowy jest taki.

Na przykład próbowałem zwrócić obj && obj[key]rzeczy. Po chwili debugowania zdaję sobie sprawę, że muszę ręcznie przekonwertować to na typ boolowski Boolean(obj && obj[key]), aby umożliwić kliknięcie.

Idąc za próbką roboczą , znalazłem rozwiązanie dla przypadku czystego komponentu:

1. Zadeklaruj komponent na poziomie aplikacji
2. Nie inicjuj w komponencie

W przypadku niezbyt ostrych oczu, takich jak moje, hrefzamiast tego routerLinkpotrzebowałem kilku wyszukiwań, aby to zrozumieć #facepalm.