Блог

У меня есть приложение Angular с фреймворком bootstrap. Я разрабатываю приложение на мобильном телефоне, используя редактор кода spck. Я пытаюсь перенаправить свой компонент из одного компонента в другой при нажатии кнопки, и, похоже, он не работает.

 App.ts
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {RouterModule, Routes, Router} from '@angular/router'
import {APP_BASE_HREF} from '@angular/common'
import {PostComponent} from './component/posts/posts.component'
import {AnswerComponent} from './component/answers/answers.component'

const appRoute: Routes = [
  {path:'home', component:PostComponent},
  {path:'answers', component:AnswerComponent},
  {path:'', redirectTo:'home', pathMatch:'full'}
  ];
@Component({
  selector: 'my-app',
  templateUrl: './app.html',
  styleUrls: ['./app.css']
})
export class App {
  
  constructor(private router: Router) {}
  
  goHome():void {
    console.log("home component");
    this.router.navigate(['/answers']);
  }
}

@NgModule({
  imports: [BrowserModule, RouterModule.forRoot(appRoute)],
  exports: [RouterModule],
  declarations: [App, PostComponent, AnswerComponent],
  providers: [{provide: APP_BASE_HREF, useValue : '/' }],
  bootstrap: [App]
})
export class AppModule {
  
}
  

 App.html
<nav class="top-bar" >
  <ul>
    <li><a href="#search"><i class="fa fa-search" aria-hidden="true"></i>Search</a></li>
    <li><a (click)="goHome()">Quora</a></li>
    <li><a data-target="#exampleModal" data-toggle="modal"><i class="fa fa-commenting-o" aria-hidden="true"></i>Add</a></li>
  </ul>
</nav>

<nav class="next-bar" >
  <ul>
    <li><a href="#home" class="active"><i class="fa fa-home" aria-hidden="true"></i></a></li>
    <li><a href="#question"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a></li>
    <li><a href="#space"><i class="fa fa-users" aria-hidden="true"></i></a></li>
    <li><a href="#notif"><i class="fa fa-bell-o" aria-hidden="true"></i></a></li>
    <li><a href="#profile"><i class="fa fa-user-circle" aria-hidden="true"></i></a></li>
  </ul>
</nav>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add Question</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">amp;times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Topic:</label>
            <input type="text" class="form-control" id="topic-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="col-form-label">Question:</label>
            <textarea class="form-control" id="question-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Add question</button>
      </div>
    </div>
  </div>
</div>
</div>
  

При нажатии он записывается в консоль, поэтому onclick работает правильно. В чем проблема с маршрутизатором.

Я не знаю, используете ли вы Safari, Chrome, Firefox или Edge (или даже IE … кстати, я надеюсь, что это не так.), Но попробуйте открыть свои инструменты разработки и перейти на вкладку «Сеть».

Если при нажатии на ссылку происходит сбой сетевого запроса, возможно, редактор spck не может разрешить механизм навигации HTML5.

В этом случае вы можете изучить настройку маршрутизатора для использования HashLocationStrategy , пример:

 RouterModule.forRoot(routes, { useHash: true })
  

Более подробную информацию по теме можно найти здесь:
https://angular.io/guide/router