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模態與其他組件的內容

回答

相關問題