#angular #typescript #angular-library
Вопрос:
Это файл маршрутизации в библиотеке.
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthLibComponent } from './auth-lib.component';
import { SignUpComponent } from './sign-up/sign-up.component';
const routes: Routes = [
{ path: '', component: AuthLibComponent },
{ path: 'sign-up', component: SignUpComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AuthLibRoutingModule {
}
lib.module.ts
import { NgModule } from '@angular/core';
import { AuthLibComponent } from './auth-lib.component';
import { AuthLibRoutingModule } from './auth-lib-routing.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login/login.component';
import { SignUpComponent } from './sign-up/sign-up.component';
@NgModule({
declarations: [AuthLibComponent, LoginComponent,
SignUpComponent
],
imports: [AuthLibRoutingModule, FormsModule, ReactiveFormsModule, CommonModule],
exports: [AuthLibComponent, LoginComponent, SignUpComponent],
})
export class AuthLibModule {}
приложение.модуль.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {AuthLibModule} from 'auth-lib';
import { AuthService } from './services/auth.service';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
AuthLibModule,
HttpClientModule,
],
providers: [AuthService],
bootstrap: [AppComponent]
})
export class AppModule { }
Маршрутизация не работает. Когда я перехожу на маршрут регистрации, экран не меняется, и компонент регистрации не вызывается. Пожалуйста, направьте меня, если кто-нибудь знает об этом.
Добавлена маршрутизация библиотеки и файл модуля, а также файл модуля проекта, в котором мы используем эту библиотеку, также показан выше.
Ответ №1:
вы можете попытаться сделать это.
в вашем AuthLibRoutingМодуле:
export const authRoutes: Routes = [
{ path: '', component: AuthLibComponent },
{ path: 'sign-up', component: SignUpComponent }
];
затем в приложении.маршрутизация.модуль.ts:
const routes = authRoutes;
Я надеюсь, что это поможет вам, с уважением.
Ответ №2:
Маршрутизация работает…
Я знаю, это звучит странно, учитывая, что вы спросили… Рассмотрим нижеприведенную строку в вашем коде
{ path: '', component: AuthLibComponent },
Там написано if path === ''
, что затем готово component = AuthLibComponent
. Так соответствует ли этот путь 'sign-up'
этому? ответ-да, так как 'sign-up' === ('' 'sign-up')
В этом заказе маршрутов по ссылке говорится
Порядок маршрутов важен, потому что маршрутизатор использует стратегию выигрыша при первом совпадении при сопоставлении маршрутов, поэтому более конкретные маршруты следует размещать над менее конкретными маршрутами. Сначала перечислите маршруты со статическим путем, за которым следует пустой маршрут, соответствующий маршруту по умолчанию
Таким образом, в основном вашим решением было бы просто изменить порядок маршрутов…
Конечно, существует лучший подход. Это на самом деле то, что pathMatch
нужно. Вы должны сообщить маршрутизатору, чтобы он полностью соответствовал маршрутизатору. Смотреть ниже
const routes: Routes = [
{ path: '', component: AuthLibComponent, pathMatch: 'full' },
{ path: 'sign-up', component: SignUpComponent }
];