Разные маршруты при нажатии разных кнопок из одного и того же компонента

#angular

Вопрос:

В моем приложении angular есть 3 компонента — signin, markets и register. Компонент входа — это мой целевой компонент. У меня есть две кнопки на странице входа — войти и зарегистрироваться. Нажатие кнопки входа должно привести меня к компоненту market, а нажатие кнопки регистрации должно привести меня к компоненту register. Я могу перейти к компоненту register после нажатия sign up, но я не могу перейти к компоненту markets после нажатия sign in. URL-адрес изменяется на localhost: 4200 /markets, но компонент markets не загружается. Компонент входа остается таким, какой он есть. В консоли нет ошибок. фрагменты для компонентов прилагаются.

signin.component.html

 <button type="button" class="btn btn-primary" [routerLink]="['../markets']">Sign in</button>
<button type="button" class="btn btn-secondary" [routerLink]="['../register']">Sign Up</button>
<router-outlet></router-outlet>

 <button type="button" class="btn btn-primary" [routerLink]="['../signin']">Register</button>
<router-outlet></router-outlet>

app.component.html

 <signin></signin>

app-routing.module.ts

 import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SigninComponent } from './signin/signin.component';
import { RegisterComponent } from './register/register.component';
import { MarketsComponent } from './markets/markets.component';

const routes: Routes = [
  { path: "signin", component: SigninComponent},
  { path: "register", component: RegisterComponent},
  { path: "markets", component: MarketsComponent}
];

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

1. имеет ли ваш компонент приложения компонент выхода маршрутизатора

2. app.component.html имеет только селектор для компонента входа (<signin></signin>). app.module. ts имеет модуль маршрутизации приложений в импорте.

3. Как сказал @HitechHitesh, вам нужно использовать <router-outlet></router-outlet> тег вместо signin в app.component. В angular указано, куда поместить основанный компонент. Если вы хотите показать вход по умолчанию, добавьте { path: "", redirectTo: "/signin", pathMatch: 'full'}, в свои маршруты. Вот французская, но хорошая статья о том, как работает маршрутизация: wetry.tech/les-secrets-du-router-d-angular

Ответ №1:

В компоненте входа в систему / компоненте приложения введите маршрутизатор в конструктор

 // import { ActivatedRoute, Router } from '@angular/router';

  constructor(private router: Router)

метод входа login() в систему включает команду this.router.navigate при успешном входе в систему.

1. Проверка входа в систему отсутствует. Я просто проверял, могу ли я перейти к другим компонентам из одного и того же компонента. Я импортировал упомянутый модуль. Просим вас уточнить, что делать с командой this.router.navigate .

2. Вы сгенерировали компонент Markets с помощью Angular CLI с помощью ng g c? если нет, объявили ли вы компоненты Markets в модуле приложения? Вы также можете попробовать использовать <button type="button" class="btn btn-primary" [routerLink]="['../markets']">Sign in</button> without .. Вот так <button type="button" class="btn btn-primary" [routerLink]="['/markets']">Sign in</button>

Ответ №2:

Прежде всего, структура маршрутизации вашего приложения имеет некоторое несоответствие, однако я сделал простую маршрутизацию по вашему требованию, пожалуйста, проверьте ссылку ниже

https://stackblitz.com/edit/angular-ahleui?embed=1amp;file=src/index.html