Использование компонента в компоненте ввода?

Question

У меня есть компонент, вызывающий функцию открытия окна:

    @Component({
      selector: 'app-deposits',
      templateUrl: './deposits.component.html',
      styleUrls: ['./deposits.component.scss'],
      animations: [listFade, growing]
    })
    export class DepositsComponent implements OnInit {

      deposits: Array<Deposit>;

      constructor(
        private cdr: ChangeDetectorRef,
        public dialog: MatDialog,
        public translate: TranslateService,
        public adapter: DateAdapter<any>) { 
          this.utils = new Utils(this.alertService, this.translate, dialog, 
        adapter);

        }

    refillDepositWindowOpen() {
    let dialogRef = this.dialog.open(RefillDepositWinComponent);

    dialogRef.afterClosed().subscribe(result => {

    });
  }

Компонент окна:

import { Component, OnInit, ViewChild } from '@angular/core';
import { TranslateService } from '`enter code here`@ngx-translate/core';
import { AlertService } from 'app/shared/services/alert.service';
import { MatDialogRef } from '@angular/material';
import { AccountsService } from 'app/accounts-manager/services/accounts.service';
import { CurrentAccount } from 'app/accounts-manager/models/account';
import { CardsService } from 'app/cards-manager/services/cards.service';
import { Car`enter code here`d } from 'app/cards-manager/models/card';
import { AcctSelectComponent } from 'app/payments-manager/components/acct-select/acct-select.component';

@Component({
  selector: 'app-refill-deposit-win',
  templateUrl: './refill-deposit-win.component.html',
  styleUrls: ['./refill-deposit-win.component.scss']
})
export class RefillDepositWinComponent implements OnInit {

  accounts: Array<CurrentAccount>;
  cards: Array<Card>;
  @ViewChild('sender') sender: AcctSelectComponent;

  constructor(
    public dialogRef: MatDialogRef<RefillDepositWinComponent>,
    private translate: TranslateService,
    private alert: AlertService,
    private accountsService: AccountsService,
    private cardService: CardsService) {

  }

  ngOnInit() {
    this.loadAccounts();
    this.loadCards();
  }

  loadAccounts() {
    this.accountsService.getAccounts()
      .subscribe(
        data => this.accounts = data,
        error => this.alert.error(error)
      );
  }


  loadCards() {
    this.cardService.getCards()
      .subscribe(
        data => this.cards = data,
        error => this.alert.error(error)
      );
  }


  submit() {

  }

  close() {
    this.dialogRef.close();
  }

}

refill-deposit-win.component.html:

  <div class="row h-sum-auto max-form-width">
      <acct-select #sender [accounts]="accounts" [cards]="cards" [placeholder]="'payments.fromAcct' | translate"></acct-select>
  </div>

Дочерний модуль, который объявляет acct-select и включается в appModule:

import { AcctSelectComponent } from "../../payments-manager/components/acct-select/acct-select.component";

@NgModule({
  imports: [
...
  ],
  declarations: [
    AcctSelectComponent
  ]

})

export class CabinetLayoutModule { 

}

Когда я объявляю и вставляю в entryComponents RefillDepositWinComponent в appModule, у меня появляется следующая ошибка:

Ошибка

Если я объявляю и вставляю в entryComponents RefillDepositWinComponent в CabinetLayoutModule, приложение создается успешно, но при попытке открыть окно я получаю ошибку: Erorr2

Answer 1

Код вашего дочернего модуля должен выглядеть так:

@NgModule({
  imports: [...],
  exports: [ AcctSelectComponent ] 
  declarations: [ AcctSelectComponent ]

})

exports - вы должны экспортировать компонент, который вы хотите использовать, в других модулях.

затем импортировать ваш дочерний модуль в вашмодуль приложения

@NgModule({
      imports: [CabinetLayoutModule],
      declarations: [ AppComponent ]

    })

теперь вы можете получить доступ к AcctSelectComponent внутри вашего компонента RefillDepositWinComponent.

Answer 2

Если вы хотите объявить RefillDepositWinComponent в AppModule, вам нужно будет экспортировать AcctSelectComponent в CabinetLayoutModule, чтобы ваш оконный компонент мог видеть его:

@NgModule({
  imports: [...],
  exports: [ AcctSelectComponent ] 
  declarations: [ AcctSelectComponent ]

})

export class CabinetLayoutModule { }

Это должно исправитьВаша первая ошибка.

Во-вторых, я не вижу проблемы, если ваш модуль выглядит примерно так, то он должен работать

@NgModule({
  imports: [...],
  declarations: [ AcctSelectComponent, RefillDepositWinComponent ],
  entryComponents: [ RefillDepositWinComponent ]

})

export class CabinetLayoutModule { }