html - ngbTabet 在切换到其他选项卡时不起作用

Question

我正在使用ngbtabet(bootstrap 4.0) 创建登录和登录选项卡。默认情况下，第一个选项卡正在加载。当我单击第二个选项卡时，第二个选项卡未加载。

有谁知道我错过了什么？

1) 登录-Container.component.html

 <div class="row">
    <ngb-tabset #tabset>
      <ngb-tab id="tab1" title="Signin">
        <ng-template ngbTabContent>
          <p>Signin elements loads here</p>
        </ng-template>
      </ngb-tab>
      <ngb-tab id="tab2"
               title="Login">
        <ng-template ngbTabContent>
        <p> Login elements loads here</p>
        </ng-template>
      </ngb-tab>
    </ngb-tabset>
  </div> 

2) 登录容器.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { NgbTabChangeEvent, NgbTabset } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: "signin-container",
  templateUrl: "./signin-container.component.html",
  styleUrls: ["./signin-container.component.scss"]
})
export class SigninContainerComponent implements OnInit {

  constructor() {}

  ngOnInit() {}

}

3) app.module.ts

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { SigninContainerComponent } from './signin-container.component';

@NgModule({
  declarations: [
    SigninContainerComponent
  ],
  imports: [
    NgbModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserModule,
]
export class AppModule implements DoBootstrap {
}

登录选项卡未在选项卡更改时加载？

标签： htmlangularbootstrap-4angular-ui-bootstrap

Answer 1

您可以创建一个包装器，在其中在选项卡内容中添加登录和登录选择器。

试试这样：

<ngb-tabset #tabset>
    <ngb-tab id="tab1" title="Signin">
        <ng-template ngbTabContent>
          <app-signin-container></app-signin-container>
        </ng-template>
    </ngb-tab>
    <ngb-tab id="tab2" title="Login">
        <ng-template ngbTabContent>
          <app-login-container></app-login-container>
        </ng-template>
    </ngb-tab>
</ngb-tabset>

工作演示