Angular 角4中的模态形式

假设我在我的项目中有一个链接，打开一个modal contains register表单，该表单通过angular进行验证， 我在我的项目中使用了

ng bootstrap

库，在模式中我定义了一个指令，然后为它编写了一个组件，但是模式不会被打开，并且出现了一个错误：

ERROR Error: No provider for Router!
    at injectionError (core.es5.js:1169)
    at noProviderError (core.es5.js:1207)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (core.es5.js:2649)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (core.es5.js:2688)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKey (core.es5.js:2620)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489)
    at resolveNgModuleDep (core.es5.js:9562)
    at NgModuleRef_.webpackJsonp.../../../core/@angular/core.es5.js.NgModuleRef_.get (core.es5.js:10644)
    at resolveDep (core.es5.js:11147)
    at createClass (core.es5.js:11011)  

app.component.html:

    <ng-template #signup let-c="close" let-d="dismiss">
        <div class="modal-header">
            <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-6"></div>
                <div class="col-5 mt-5 mb-2">
                    <div class="wrapper-left-content">
                        <app-register-form></app-register-form>
                    </div>
                </div>
            </div>
        </div>
    </ng-template>

import { Component, Injectable, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup,  Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from '../services/auth.services';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'app-register-form',
    templateUrl: '../templates/register.component.html'
})
@Injectable()
export class RegisterComponent implements OnInit {
    private errorMessage: any ;
    closeResult: string;

    FirstName = new FormControl('', [
        Validators.required
    ]);
    LastName = new FormControl('', [
        Validators.required
    ]);

    Password = new FormControl('', [
        Validators.required,
        Validators.minLength(6)
    ]);
    Password_Confirm = new FormControl('', [
        Validators.required
    ]);

<div class="user-info">
    <div class="user-login-link">
        <a href="#" data-toggle="modal" data-target="#signup" (click)="open(signup)"></a>
    </div>
    <div class="user-login-link">
        <a href="#" data-toggle="modal" data-target="#signin" (click)="open(signin)"></a>
    </div>
</div>

我怎样才能解决它

我通过以下代码调用模态：

    <ng-template #signup let-c="close" let-d="dismiss">
        <div class="modal-header">
            <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-6"></div>
                <div class="col-5 mt-5 mb-2">
                    <div class="wrapper-left-content">
                        <app-register-form></app-register-form>
                    </div>
                </div>
            </div>
        </div>
    </ng-template>

import { Component, Injectable, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup,  Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from '../services/auth.services';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'app-register-form',
    templateUrl: '../templates/register.component.html'
})
@Injectable()
export class RegisterComponent implements OnInit {
    private errorMessage: any ;
    closeResult: string;

    FirstName = new FormControl('', [
        Validators.required
    ]);
    LastName = new FormControl('', [
        Validators.required
    ]);

    Password = new FormControl('', [
        Validators.required,
        Validators.minLength(6)
    ]);
    Password_Confirm = new FormControl('', [
        Validators.required
    ]);

<div class="user-info">
    <div class="user-login-link">
        <a href="#" data-toggle="modal" data-target="#signup" (click)="open(signup)"></a>
    </div>
    <div class="user-login-link">
        <a href="#" data-toggle="modal" data-target="#signin" (click)="open(signin)"></a>
    </div>
</div>

---

没有路由器提供程序

表示您缺少此定义：

//For the app.module.ts
@NgModule({
  imports: [RouterModule.forRoot(...)]

//For other modules
@NgModule({
  imports: [RouterModule.forChild(...)],

还要确保您使用的是它的最新版本。我指的是第三方组件。

---

还有其他一些不错的组件，比如你也可以试试。

你是否尝试过使用Angular的

*ngIf

指令显示/隐藏？我认为这与modals或ng引导无关。您似乎正在某处（何处）使用路由器服务，但尚未在根NgModule中导入RouterModule。我编辑我的问题您的app.module看起来像什么？如前所述，您似乎缺少ngx模块中的RouterModule。我投了反对票，因为您的答案具有误导性：问题是关于哪个与

ngx bootstrap

-这是两个独立的项目，在任何情况下都不是重命名！请删除错误的信息，我可以删除否决票。