我将一个Angular 组件(audit2.Component)放在一个模块(care-audit.module)中,并且我正在try 打开一个p对话并呈现一个存在于另一个模块(varance.module)中的组件(urc.Component).我打开了p对话并重新编写了标题,但似乎无法使用我在其上定义的 Select 器来呈现urc.Component.

Audit2.component.ts

import { UrcComponent } from "src/app/variance/urc/urc.component";

@Component({
  selector: "app-audit2",
  templateUrl: "./audit2.component.html",
  styleUrls: ["./audit2.component.css"],
  providers: [MessageService]
})

Audit2.Component.html-用于p对话

<p-dialog
[(visible)]="individualActivityDialog"
[style]="{ width: '98vw' }"
[maximizable]="true"
[resizable]="true">
  <p-header>
    <h4>Individual Activity</h4>
    {{ selectedRow["Name"] }} ID:{{ selectedRow["Id"] }}
  </p-header>
    <app-urc></app-urc>
</p-dialog>

Nursing-audit.module.ts

import { NgModule, ChangeDetectorRef } from '@angular/core';
import { CommonModule } from '@angular/common';

import { NursingAuditRoutingModule } from './nursing-audit-routing.module';
import { NursingAuditComponent } from './nursing-audit.component';
import { TreeNode } from 'primeng/api/treenode';
import { NursingAuditService } from '../services/nursing-audit.service';
import { TabViewModule } from 'primeng/tabview';
import {TreeTableModule } from 'primeng/treetable';
import {TableModule} from 'primeng/table'
import {DialogModule} from 'primeng/dialog';
import {MessagesModule} from 'primeng/messages';
import {MessageModule} from 'primeng/message';
import {FormsModule } from '@angular/forms';
import {DropdownModule} from 'primeng/dropdown';
import {TooltipModule} from 'primeng/tooltip';
import { SummaryComponent } from './summary/summary.component';
import { AuditComponent } from './audit/audit.component';
import { IndividualActivityComponent } from './individual-activity/individual-activity.component';
import { SelectButtonModule} from 'primeng/selectbutton';
import { FilterModalComponent } from './filter-modal/filter-modal.component';
import { FollowUpModalComponent } from './follow-up-modal/follow-up-modal.component';
import { NotesModalComponent } from './notes-modal/notes-modal.component';
import { CommentModalComponent } from './comment-modal/comment-modal.component';
import { PeerToPeerModule } from '../peer-to-peer/peer-to-peer.module';
import { SharedModule } from '../shared/shared.module';
import { WasteModuleModule } from '../waste-module/waste-module.module';
import {CalendarModule} from 'primeng/calendar';
import {ProgressSpinnerModule} from 'primeng/progressspinner';
import { Audit2Component } from './audit2/audit2.component';
import { Summary2Component } from './summary2/summary2.component';
import { ToastModule } from 'primeng/toast';
import { AuditOverridesListComponent } from './audit-overrides-list/audit-overrides-list.component';
import { AuditOverridesEditComponent } from './audit-overrides-edit/audit-overrides-edit.component';
import { AuditHomeComponent } from './audit-home/audit-home.component';
import { ConfirmDialogModule } from 'primeng/confirmdialog';
import { MultiSelectModule } from 'primeng/multiselect';
import { ConfirmationService } from 'primeng/api';
import { NgSelectModule } from '@ng-select/ng-select';
import { ShareModalComponent } from './share-modal/share-modal.component';
import { RiskScoreChartComponent } from './risk-score-chart/risk-score-chart.component'; 
import {ChartModule} from 'primeng/chart';
import {CheckboxModule} from 'primeng/checkbox';
import { SplitterModule} from 'primeng/splitter';
import { CardModule} from 'primeng/card';
import { ToggleButtonModule } from "primeng/togglebutton";
import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import { SummaryGraphsComponent } from './summary-graphs/summary-graphs.component';
import { VarianceModule } from '../variance/variance.module';



@NgModule({
  declarations: [NursingAuditComponent, CommentModalComponent, SummaryComponent, 
                AuditComponent, IndividualActivityComponent, FilterModalComponent, 
                FollowUpModalComponent, NotesModalComponent, Audit2Component, Summary2Component, 
                SummaryGraphsComponent, AuditOverridesListComponent, AuditOverridesEditComponent, 
                AuditHomeComponent, ShareModalComponent, RiskScoreChartComponent],
  imports: [
    CommonModule,
    NursingAuditRoutingModule,
    TabViewModule,
    TreeTableModule,
    DialogModule,
    TableModule,
    MessageModule,
    MessagesModule,
    FormsModule,
    DropdownModule,
    TooltipModule,
    SelectButtonModule,
    PeerToPeerModule,
    SharedModule,
    WasteModuleModule,
    CalendarModule,
    ProgressSpinnerModule,
    ToastModule,
    ConfirmDialogModule,
    MultiSelectModule,
    NgSelectModule,
    ChartModule,
    CheckboxModule,
    ToggleButtonModule,
    SplitterModule,
    CardModule,
    VarianceModule
  ],
  providers:[
    NursingAuditService,
    ConfirmationService
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA,NO_ERRORS_SCHEMA]
})
export class NursingAuditModule {

}

Urc.component.ts

@Component({
  selector: "app-urc",
  templateUrl: "./urc.component.html",
  styleUrls: ["./urc.component.css"],
  providers: [MessageService, ConfirmationService],
})
export class UrcComponent implements OnInit {
  varianceNodes: TreeNode[] = [];
  commentDialog: boolean = false;
...
...

Variance.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { VarianceRoutingModule } from './variance-routing.module';
import { IndexComponent } from './index/index.component';
import { VarianceComponent } from './variance.component';
import {TabViewModule} from 'primeng/tabview';
import {TreeTableModule } from 'primeng/treetable';
import { VarianceService } from '../services/variance.service';
import {DialogModule} from 'primeng/dialog';
import {TooltipModule} from 'primeng/tooltip';
import { UrcComponent } from './urc/urc.component';
import { CommentModalComponent } from './comment-modal/comment-modal.component';
import { ResolutionCodingModalComponent } from './resolution-coding-modal/resolution-coding-modal.component';
import { CompiledDataComponent } from './compiled-data/compiled-data.component';
import { EhrComponent } from './ehr/ehr.component';
import { AdcComponent } from './adc/adc.component';
import { NormalizedDataComponent } from './normalized-data/normalized-data.component';
import {TableModule} from 'primeng/table';
import { FormsModule } from '@angular/forms';
import {MessagesModule} from 'primeng/messages';
import {MessageModule} from 'primeng/message';
import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import {DropdownModule} from 'primeng/dropdown';
import { FilterModalVarComponent } from './filter-modal-var/filter-modal-var.component';
import {CalendarModule} from 'primeng/calendar';
import { ProgressSpinnerModule } from 'primeng/progressspinner';
import { SharedModule } from '../shared/shared.module';
import { SelectButtonModule} from 'primeng/selectbutton';
import { ToastModule } from 'primeng/toast';
import { NgSelectModule } from '@ng-select/ng-select'; 
import {AutoCompleteModule} from 'primeng/autocomplete';
import { CheckboxModule } from 'primeng/checkbox';
import {MultiSelectModule} from 'primeng/multiselect';
import {ConfirmDialogModule} from 'primeng/confirmdialog';
import { LinkRecordsModalComponent } from './link-records-modal/link-records-modal.component';
import { LinkTransactionComponent } from './link-transaction/link-transaction.component';



@NgModule({
  declarations: [IndexComponent, VarianceComponent, UrcComponent, CommentModalComponent,
    ResolutionCodingModalComponent, CompiledDataComponent, EhrComponent, AdcComponent,
    NormalizedDataComponent, FilterModalVarComponent, LinkRecordsModalComponent, LinkTransactionComponent],
  imports: [
    CommonModule,
    VarianceRoutingModule,
    TabViewModule,
    TreeTableModule,
    DialogModule,
    TooltipModule,
    TableModule,
    FormsModule,
    MessageModule,
    MessagesModule,
    DropdownModule,
    CalendarModule,
    SharedModule,
    SelectButtonModule,
    ProgressSpinnerModule,
    ToastModule,
    AutoCompleteModule,
    NgSelectModule,
    CheckboxModule,
    MultiSelectModule,
    ConfirmDialogModule,
    // InputNumberModule
  ],
  providers : [
    VarianceService
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA,NO_ERRORS_SCHEMA]
})
export class VarianceModule { }

And this is what the p-dialogue renders when I open it. There should be a whole table underneath the header. The urc.component does render and function inside of the variance.module where it lives. enter image description here

推荐答案

Variance.module.ts中,您需要将UrcComponent添加到Exports数组中,才能在nursing-audit.module.ts中访问它

Variance.module.ts

  declarations: [
      ...
      UrcComponent,
      ...
  ],
  ...
  exports: [UrcComponent],
  ...
})
export class VarianceModule { }

Html相关问答推荐

角|将动态html属性添加到子组件

如何将值从Google Sheets侧边栏中的表单中的输入传递到Google Sheets单元格中使用Textile()

如何使用wai-aria标签访问相关的复选框?

Font Awesome 6插入符号未显示

如何防止可见的滑动抽屉,同时转移HTML方向?

当光标悬停在(相同)父元素上方时,为多个子元素创建不同的过渡动画

如何在排序上重用参数?

IFRAME中的Chrome图像未调整大小

顶部有文字的图像的悬停效果

(HTML框架标签)点击后目标框架将不再工作

:invalid Select 器的惰性判断

perl hdb 调试器:浏览器以错误的编码显示 UTF-8 源代码

如何保持块扩展以填充视口?

如何在 VS Code 中 Select 和删除 HTML 元素(其标签和内容)?

表单中如何分别禁用/启用多个提交按钮?

使用 calc 函数设置字体大小时 Flexbox 项目重叠

如何截断一些文本并用双引号引起来?

奇怪的幻影 div 命名为

使用 golem 框架在shiny 的应用程序中存储背景图片的位置

水平滚动框不显示所有元素