0

Есть представление компонента, в котором сделан переход на две разные страницы двумя разными способами в app.component.html:

<div>
 <button class="nav-item" [routerLink]="['/add-element']"> 
  AddElement </button>
 <input type="button" class="btn btn-primary pull-right" 
  (click)="onSubmit()" value="Next">    
</div>

app.component.ts выглядит так:

import { Component, DebugElement } from '@angular/core'
import {Router, Routes} from '@angular/router'
@Component({
selector: 'app-root',
templateUrl: "./app.component.html",
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor(private router: Router) {}   
onSubmit() {
  this.router.navigate(['/about']);
 }
}    

app-routing.module.ts выглядит так:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AddElementComponent } from './add-element/add- 
element.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
const routes: Routes = [{ path: 'add-element', component: 
AddElementComponent },
                    {path: 'about', component: 
AboutComponent},
                    {path: 'home', component: HomeComponent}
                  ];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule, AddElementComponent, HomeComponent, 
AboutComponent],
declarations: [AddElementComponent, HomeComponent, 
AboutComponent]
})
export class AppRoutingModule { }

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 { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
@NgModule({
  declarations: [
  AppComponent
],
imports: [
 BrowserModule,
 AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

add-element.html:

<router-outlet></router-outlet>
<p><b>Add new element.</b></p>**

При клике на каждой из кнопок - в адресной строке переход происходит, страница - остаётся та же. Что не так? Почему не работает маршрутизация?

3
  • То же самое при введении мной адреса в адресной строке браузера страница остаётся та же - нет перехода!
    – Anton
    16 июн 2021 в 8:24
  • в консоли браузера наверняка есть ошибка
    – IAfanasov
    17 июн 2021 в 15:08
  • В консоли ошибок нет!
    – Anton
    18 июн 2021 в 8:08

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Посмотрите другие вопросы с метками или задайте свой вопрос.