Question

我目前正在使用平均堆栈开发一个Web应用程序，并且使用ng-bootstrap的模态功能遇到了一些麻烦。我想要的是当用户点击导航栏的注册选项时显示注册模式。我有一个navbar组件和一个寄存器组件，这是我到目前为止的代码

register.component.ts

 import { Component, OnInit } from '@angular/core';
 ...
 import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

 @Component({
   selector: 'app-register',
   templateUrl: './register.component.html',
   styleUrls: ['./register.component.css']
 })
 export class RegisterComponent implements OnInit {
    ...

   constructor(
     ...,
     public registerModal: NgbActiveModal
   ) { }

navbar.component.ts

import { Component, OnInit } from '@angular/core';
...
import {NgbCollapseModule} from '@ng-bootstrap/ng-bootstrap';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
import {RegisterComponent} from '../register/register.component';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
  public navCollapsed = true;

  constructor(      
...
    private regCom: RegisterComponent
    private ngbModal: NgbModal
    ) { }

  ngOnInit() {
  }

  collapseOption(){
    this.navCollapsed = !this.navCollapsed;
    return true;
  }

   openRegister(){
    const modalReg = this.ngbModal.open(this.regComp);
   }

 }

我试图在导航栏组件中导入寄存器组件，但是我抛出了一堆我不理解的错误，因为我是使用MEAN堆栈进行编程的菜鸟，所以如果你可以帮助我如何解决这个问题，我真的很感激。

出现的错误是：

EXCEPTION: Error in ./AppComponent class AppComponent - inline template:0:0 caused by: No provider for RegisterComponent!

提前感谢您的帮助！

Answer 1

您尝试通过构造函数将组件注入到您的应用中，即使它不能注入（这就是为什么＆＃34;没有提供商＆＃34;）。没必要。

constructor(      
...
    private regCom: RegisterComponent // <-- you don't need this
    private ngbModal: NgbModal
    ) { }

您不需要将组件类的实例（只是类本身）传递给open类的NgbModal方法。

openRegister(){
    const modalReg = this.ngbModal.open(RegisterComponent);
   }

Answer 2

我认为您需要从父组件

获取输入

import { Input } from '@angular/core';
....
@Input('sample') childValue: string;
....
getValue() {
    console.log(childValue)
}

在您的父html中，您可以执行以下操作：

<your-tag (click)="lgModal.show()"></your-tag>
<your-modal #lgModal [sample]="your_data"></your-modal>

Answer 3

此外，您还需要在app.module中添加以下内容：

@NgModule({
  ...,
  entryComponents: [ RegisterComponent ],
  ...
})

Ng-bootstrap模式包含来自另一个组件

3 个答案: