Question

我尝试在我的其中一个页面添加模态框，为此我已经浏览了ng-bootstraphttps：//ng-bootstrap.github.io/#/components/modal/examples < / p>

为了实现模态对话框，我已经在components / invoice / modal中编写了代码

我已经编写了模态组件，就像提供在线文档一样。

modal.component.ts

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
  </div>
</ng-template>

<tr>
  <td>
    <p data-placement="top" data-toggle="tooltip" title="Add">
      <button class="btn btn-primary btn-xs" data-title="Add" data-toggle="modal" data-target="#add" (click)="open(content)">
        <span class="glyphicon glyphicon-plus-sign"></span>
      </button>Add Invoice
    </p>
  </td>
</tr>

modal.component.html

<app-modal></app-modal>

我在

的其他组件中使用了此组件

invoice.component.html

import {FormsModule,ReactiveFormsModule} from '@angular/forms';
import { JsonpModule } from '@angular/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { ModalComponent } from './components/invoice/modal/modal.component';

@NgModule({
declarations: [
ModalComponent
],
imports: [
NgbModule,
JsonpModule,
NgbModule.forRoot()
]

在 app.module.ts 中，添加以下代码

    public class MainActivity extends AppCompatActivity {

    private SectionsPagerAdapter mSectionsPagerAdapter;


    private ViewPager mViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        // Create the adapter that will return a fragment for each of the three
        // primary sections of the activity.

        mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

        // Set up the ViewPager with the sections adapter.
        mViewPager = (ViewPager) findViewById(R.id.container);
        mViewPager.setAdapter(mSectionsPagerAdapter);

        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(mViewPager);

    }





    public class SectionsPagerAdapter extends FragmentPagerAdapter {

        public SectionsPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            switch (position) {
                case 0:
                    tab1 tab1 = new tab1();
                    return tab1;

                case 1:
                    tab2 tab2 = new tab2();
                    return tab2;
                case 3:
                    tab3 tab3 =new tab3();
                    return tab3;

                default: return null ;
            }



        }

        @Override
        public int getCount() {
            // Show 3 total pages.
            return 3;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            switch (position) {
                case 0:
                    return "Protisthan";
                case 1:`enter code here`
                    return "Eknojore";
                case 2:
                    return "Onnorokom";
            }
            return null;
        }
    }
}

因此，没有任何工作，就像我点击添加发票按钮，然后整个应用程序被冻结，就像在应用程序上没有其他链接可点击一样。为此，我已在控制台中检查，也没有出现错误消息。谁能帮我？我犯的错是什么？

感谢。

ng-bootstrap的NgbModal无法正常工作

0 个答案: