如何解决Angular Router在Spck移动编辑器中不起作用
我有一个带有引导框架的Angular应用。我正在使用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">×</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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。