他のコンポーネントからのコンテンツを含むNg-bootstrapモーダル

Question

現在、平均スタックを使用してWebアプリケーションを開発しており、ng-bootstrapのモーダル機能を使用していくつかの問題を抱えています。私が望むのは、ユーザーがnavbarのregisterオプションをクリックすると、レジスタモーダルを表示することです。私はまた、ナビゲーションバーのコンポーネントとレジスタの構成要素を持っており、これは私がこれまで

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); 
    } 

} 

を持っているコードです

私はnavbarコンポーネントのレジスタコンポーネントをインポートしようとしましたが、MEANスタックを使用したプログラミングでは、この問題を解決する方法を手伝っていただければ、本当に感謝しています。あなたの助けを事前に

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

ありがとう：表示されます

エラーはこれです！

Answer 1

私はあなたがあなたの親コンポーネントあなたの親HTMLで

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

からの入力を取る、あなたは次の操作を行うことが必要だと思う：

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

Answer 2

あなたはあなたの中にコンポーネントを注入しようとしています（たとえそれが「プロバイダがありません」の理由で）コンストラクタを介してアプリケーションを呼び出すことができますが、その必要はありません。

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

あなたはNgbModalクラスのopen方法に、ちょうどクラス自体、コンポーネントクラスのインスタンスを渡す必要はありません。

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

Answer 3

加えて、次のapp.moduleに追加する必要があります。

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