如何將組件導入Angular中的另一個組件

Question

我創建了一個名為 CopySchedulefromSiteComponent 的組件，我想將它導入另一個名為 SiteScheduleComponent 的組件。 我不確定如何正確執行此操作

CopySchedulefromSiteComponent 使用 Formly 在其中有一個字段

CopySchedulefromSiteComponent

 @Component({
  selector: 'app-copy-schedule-from-site',
  templateUrl: './copy-schedule-from-site.component.html',
  styleUrls: ['./copy-schedule-from-site.component.scss'],
  })
export class CopyScheduleFromSiteComponent implements OnInit {
showOverwriteWarningModal(): Observable<boolean> {
const deleteRef = this.dialog.open(CopyScheduleModalComponent, {});
return deleteRef.afterClosed();
}

  copySiteScheduleControl: FormlyFieldConfig | undefined;

 modelLoaded = false;
 form = new FormGroup({});
 options: FormlyFormOptions = {};
 fields: FormlyFieldConfig[] = [
  {
   fieldGroupClassName: 'row',
   fieldGroup: [
    {
      wrappers: ['form-field'],
      className: 'col-6',
      key: 'siteScheduleControl',
      type: 'select',
      templateOptions: {
        label: 'Copy Schedule from Site',
        options: this.approvedSites,
        labelProp: 'text',
      },
      expressionProperties: {
        'templateOptions.disabled': (): boolean => {
          return this.siteSubmissionModel.disableControls;
        },
      },
      hooks: {
        onInit: (field: FormlyFieldConfig | undefined): void => {
          this.copySiteScheduleControl = field;
          if (field?.templateOptions?.options) {
            field.templateOptions.options = this.approvedSites;
          }
        },
      },
      },
    ],
  },
];

我希望將 CopySchedulefromSite 組件中的正式字段連接/導入到 SiteScheduleComponent 正式字段。 我導入了組件，但得到“聲明了 CopyScheduleFromSiteComponent”，但它的值從未被讀取。 包括下面的一些正式字段

站點調度組件

 import {CopyScheduleFromSiteComponent} from './copy-schedule-from- 
   site/copy-schedule-from-site.component';

 @Component({
 selector: 'app-site-schedule',
 templateUrl: './site-schedule.component.html',
 styleUrls: ['./site-schedule.component.scss'],
 })
export class SiteScheduleComponent implements OnInit, OnChanges {
@Input() siteSubmissionModel: SiteSubmissionModel = new SiteSubmissionModel();    

  copySiteScheduleControl: FormlyFieldConfig | undefined;
  model: SiteScheduleModel = {
  siteScheduleControl: undefined,
   monthsOfOperation: new CoreApi.MonthsOfOperation(),
   daysOfOperation: {days: []},
   hoursOfOperation: {days: []},
   exception: [],
 };
  modelLoaded = false;
  form = new FormGroup({});
  options: FormlyFormOptions = {};
  fields: FormlyFieldConfig[] = [
  {
   fieldGroupClassName: 'row',
  fieldGroup: [
    {
      wrappers: ['form-field'],
      className: 'col-6 mt-small',
      type: 'button',
      templateOptions: {
        text: 'Copy',
        matIcon: 'file_copy',
        onClick: (): void => {
          if (this.model.monthsOfOperation && (this.model.monthsOfOperation.fromDate || 
             this.model.monthsOfOperation.toDate)) {
            this.showOverwriteWarningModal().subscribe((confirmed) => {
              if (confirmed) {
                this.copySchedule();
              }
            });
          } else {
            this.copySchedule();
          }
        },
      },
      expressionProperties: {
        'templateOptions.disabled': (): boolean => {
          return !this.model.siteScheduleControl || this.siteSubmissionModel.disableControls;
        },
      },
    },
    ],
   },
   {
  template: '<h4>Months of Operation</h4>',
   },
   {
    fieldGroupClassName: 'row',
    fieldGroup: [
     {
      className,
      fieldGroup: [
        {
          key: 'monthsOfOperation',
          type: FORMLY_CUSTOM_TYPE_DATE_RANGE_PICKER,
          templateOptions: {
            fromDate: 'monthsOfOperation.fromDate',
            toDate: 'monthsOfOperation.toDate',
            required: true,
            onDateChange: (): void => this.onMonthsOfOperationChanged(),
          },
          expressionProperties: {
            'templateOptions.disabled': (): boolean => {
              return this.siteSubmissionModel.disableControls;
            },
          },
         },
        ],
      },

請為此提供解決方案。

Answer 1

您真正想要做的是您想在另一個組件中使用一個組件。 您幾乎從不將組件導入另一個組件。

要在 Component B 中使用 Component A，您需要將它們聲明在同一個 Module 中，或者將 Component A 導入到聲明 Component B 的 Module 中。

如果滿足該要求，您可以通過將組件 A 的選擇器添加到組件 B 的 html 中來在組件 B 中使用組件 A。然后可以通過幾種方式在組件之間進行通信，例如使用它們的輸入和輸出。

要閱讀有關組件和模塊的更多信息：

https://angular.io/api/core/Component

https://angular.io/guide/architecture-modules

要掌握使用組件的基礎知識：

https://angular.io/tutorial/toh-pt3