Ng-bootstrap模态与其他组件的内容

我目前正在开发一个使用平均堆栈的web应用程序，并且使用ng-bootstrap的模态特性遇到了一些麻烦。我想要的是当用户点击导航栏的注册选项时显示注册模式。我有一个导航栏成分并且还寄存器部件，这是我迄今为止Ng-bootstrap模态与其他组件的内容

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堆栈进行编程时的noob，所以如果你能帮助我解决这个问题，我会很感激。

出现的错误是这样的：

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

预先感谢您的帮助！

来源

2017-03-17 Angelo Crincoli

平均堆栈是不是真的相关，技术上角2没有资格作为它的一部分。无可否认，这只与客户端编程有关。 –

您是否在app.module中导入了这些组件？您使用的组件应该在app.module或羽毛模块中导入。 – ZouAlan

是的，它们全都是在app.module中导入的 –

我认为你需要把输入从父组件

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>

来源

2017-03-18 02:31:35 Mathers

你试图组件注入到您的应用程序通过构造函数，即使它不是可注入的（这就是为什么“没有提供者”），没有必要这样做。

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

你并不需要通过组件类的实例，只是类本身，到NgbModal类的open方法。

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

来源

2017-03-18 14:08:43

就是这样！我这样做，没有更多的错误，但有一个新问题。它看起来像模态是开放的，但它没有显示出来。我在其他组件中使用的旋转木马正在发生类似的事情。但是，这是解决我最初的问题。谢谢你的帮助！ –

很高兴我能帮到你。该症状可能存在很多问题，但您应该从控制台错误开始。 :) –

此外，您将需要添加到app.module如下：

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

来源

2017-07-18 17:50:56

Ng-bootstrap模态与其他组件的内容

回答

相关问题