Модальное окно 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, поэтому, если вы можете помочь мне решить эту проблему , буду очень благодарен.

Появляется такая ошибка:

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

Заранее спасибо за помощь!


angular components mean-stack modal-dialog ng-bootstrap
person Angelo Crincoli    schedule 17.03.2017    source источник
comment
Стек MEAN не очень актуален, и технически Angular 2 не считается его частью. Независимо от этого, это связано только с программированием на стороне клиента.   -  person Aluan Haddad    schedule 18.03.2017
comment
Вы импортируете эти компоненты в app.module? Компонент, который вы использовали, должен быть импортирован в модуль app.module или перо.   -  person ZouAlan    schedule 18.03.2017
comment
Да, все они импортированы в app.module   -  person Angelo Crincoli    schedule 18.03.2017

Ответы (3)


arrow_upward
2
arrow_downward

Вы пытаетесь внедрить компонент в свое приложение через конструктор, даже если он не может быть введен (поэтому «нет провайдера»). В этом нет необходимости.

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

Вам не нужно передавать экземпляр класса компонента, только сам класс, в метод open класса NgbModal.

openRegister(){
    const modalReg = this.ngbModal.open(RegisterComponent);
   }
person Adnan A.    schedule 18.03.2017
comment
Вот и все! Я сделал это, и больше нет ошибок, но есть новая проблема. Похоже, что модальное окно открыто, но не отображается. Нечто подобное происходит с каруселью, которую я использую в другом компоненте. Однако это было решением моей первоначальной проблемы. Спасибо за вашу помощь! - person Angelo Crincoli; 19.03.2017
comment
Рад, что смог помочь. С этим симптомом может быть много проблем, но вам, вероятно, следует начать с ошибок консоли. :) - person Adnan A.; 19.03.2017

arrow_upward
1
arrow_downward

Кроме того, вам нужно будет добавить в app.module следующее:

@NgModule({
  ...,
  entryComponents: [ RegisterComponent ],
  ...
})
person Phil Huhn    schedule 18.07.2017

arrow_upward
-1
arrow_downward

Я думаю, вам нужно получить данные от вашего родительского компонента

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>
person Mathers    schedule 18.03.2017