在Angular和Bootstrap 4中使用选项卡和路由器
在Angular和Bootstrap 4中使用选项卡和路由器
提问于 2018-04-20 15:42:28
当我点击一个标签时，它会把我带到我需要的html，但是标签消失了。它不会进入选项卡的选项卡内容。它似乎加载了另一个页面。请参阅index.html下面的代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Enventmanager</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>app.module.ts
@NgModule({
declarations: [
AppComponent,
HomeComponent,
UserComponent,
SomeComponent,
SignInComponent,
SignUpComponent,
],
imports: [
BrowserModule,
RouterModule.forRoot([
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
},
{
path: 'user',
component: UserComponent
},
{
path: 'signin',
component: SignInComponent
},
{
path: 'signup',
component: SignUpComponent
},
{
path: 'home',
component: HomeComponent
}
])
],
providers: [],
bootstrap: [AppComponent]user.component.html
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" routerLink='/signup' role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" routerLink='/signin' role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" routerLink='/signup' role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<router-outlet></router-outlet>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>我用的是Angular 5和Bootstrap 4，你能帮我吗？我真的很感激。
回答 2
Stack Overflow用户
发布于 2018-04-20 15:52:18
原因是它们有不同的路由，它们都是父级
更好的解决方案正在移动
将模板内容user.component.html到AppComponent
或者，您可以尝试使用子代 https://angular.io/guide/router
Stack Overflow用户
发布于 2018-04-20 15:47:14
您需要将Bootstrap javascript文件及其依赖项包含到angular.cli.json文件中。从那时起，第一个Bootstrap就完全在一个angular应用中工作了。在此之前，只有视觉/css部分可以工作。
请记住，jquery和popper是bootstrap所必需的，也是避免错误所必需的。
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/popper.js/dist/umd/popper.js",
"../node_modules/bootstrap/js/dist/alert.js",
"../node_modules/bootstrap/js/dist/button.js",
"../node_modules/bootstrap/js/dist/carousel.js",
"../node_modules/bootstrap/js/dist/collapse.js",
"../node_modules/bootstrap/js/dist/dropdown.js",
"../node_modules/bootstrap/js/dist/modal.js",
"../node_modules/bootstrap/js/dist/scrollspy.js",
"../node_modules/bootstrap/js/dist/tab.js",
"../node_modules/bootstrap/js/dist/tooltip.js",
"../node_modules/bootstrap/js/dist/util.js",
"../node_modules/bootstrap/js/dist/popover.js"
]页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49936553
复制相关文章
相似问题
腾讯云开发者
