Question

当我点击一个标签时，它会让我看到我需要的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.你能帮忙吗？我真的很感激。

Answer 1

您需要将Bootstrap javascript文件及其依赖项包含在 angular.cli.json 文件中。从那以后，第一个Bootstrap完全在一个角度应用程序中工作。在它之前只是视觉/ css部分有效。

请记住，引导程序需要 jquery 和 popper ，并且还需要避免错误。

"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"
  ]

Answer 2

原因是他们有不同的路线，所有路线都是父母

更好的解决方案正在移动

user.component.html 模板内容为 AppComponent

或者您可以尝试使用儿童 https://angular.io/guide/router

在Angular和Bootstrap中使用Tabs和Router 4

2 个答案: