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 { 

}

当我在appModule中声明并将RefillDepositWinComponent插入entryComponents时，出现以下错误：

Error

如果我在CabinetLayoutModule中声明RefillDepositWinComponent并将其插入entryComponents中，则应用程序将成功构建，但是当我尝试打开窗口时出现错误： Erorr2

Answer 1

如果您想在let results: [Int] if numbers.count % 4 != 0 { results = Array(numbers.chunked(into: 4).map { $0.reduce(0, +) }.dropLast()) } else { results = numbers.chunked(into: 4).map { $0.reduce(0, +) } }上声明RefillDepositWinComponent，则需要在AppModule上导出AcctSelectComponent，以便您的窗口组件可以看到它：

CabinetLayoutModule

这应该可以解决您的第一个错误。

第二，我看不到问题，如果您的模块看起来像这样，那么它一定可以工作

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

})

export class CabinetLayoutModule { }

Answer 2

您的子模块代码必须这样

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

})

exports-您必须导出要在其他模块中使用的组件。

接下来将您的子模块导入您的应用模块

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

    })

现在您可以访问RefillDepositWinComponent组件内部的“ AcctSelectComponent”。

在输入组件中使用组件？

2 个答案: