javascript - 页面使用角度路由器在浏览器中显示两次?
问题描述
Angular 在默认端口上加载页面,localhost:4200
我希望它在应用程序构建时作为localhost:4200/specialtyquestions
其工作,但它在浏览器中显示页面两次,知道这里实现了什么错误吗?
应用程序路由.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
const routes: Routes = [{
path: 'specialtyquestions',
component: AppComponent
},
{
path: '',
redirectTo: 'specialtyquestions',
pathMatch: 'full'
}];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.html
<app-navbar></app-navbar>
<div class="container-fluid">
<div class="row">
<div class="col-sm-5">
<app-create-questions></app-create-questions>
</div>
<div class="col-sm-1">
<div class="row">
<button type="button" class="btn btn-primary" data-backdrop='static' (click)="openModal()" style="margin-top: 300px;" data-toggle="modal" data-target="#exampleModalLong">Start Formatting</button>
</div>
</div>
<div class="col-sm-5">
<app-format-questions></app-format-questions>
</div>
</div>
</div>
<h2>
<router-outlet></router-outlet>
</h2>
图片
解决方案
删除 Router-Outlet,因为当您最后添加该标签时,它会再次运行该部分。所以从最后删除那个部分并检查
<app-navbar></app-navbar>
<div class="container-fluid">
<div class="row">
<div class="col-sm-5">
<app-create-questions></app-create-questions>
</div>
<div class="col-sm-1">
<div class="row">
<button type="button" class="btn btn-primary" data-backdrop='static' (click)="openModal()" style="margin-top: 300px;" data-toggle="modal" data-target="#exampleModalLong">Start Formatting</button>
</div>
</div>
<div class="col-sm-5">
<app-format-questions></app-format-questions>
</div>
</div>
</div>
当您想从一个页面路由到另一个页面时需要路由器部分,例如 127.0.0.1:4000/Student
推荐阅读
- node.js - 为 gm 上传文件时可以获取缓冲区或流吗?
- java - java.awt.Rectangle#intersects(Rectangle r) 丑陋的实现?
- amazon-web-services - 如何将 PowerBI 连接到 AWS dynamodb?
- javascript - 如何防止 window.open 函数多次打开一个窗口?返回函数?
- jpa - 在 JPA entitymanager 查询中获取总数
- video - CKAN 是否支持视频格式?
- html - Css 样式未正确应用
- typescript - 从 node 模块导入的类型在编译后变为 `any`
- angular - 无论如何,当我们使用 Protractor 测试所有不同的用例时,具有 100% 覆盖率的 Angular 单元测试是否仍然值得付出努力?
- linux - Linux共享库加载并与其他进程共享代码