如何将组件导入Angular中的另一个组件

Question

I created a component called CopySchedulefromSiteComponent and I want to import it into another component called SiteScheduleComponent. I am not sure how to do this correctly

CopySchedulefromSiteComponent has one field in it using 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;
          }
        },
      },
      },
    ],
  },
];

I want to have the formly field from CopySchedulefromSite component connected/imported to SiteScheduleComponent formly fields. I imported the component but get ''CopyScheduleFromSiteComponent' is declared but its value is never read'. Included some formly fields below

SiteScheduleComponent

 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;
            },
          },
         },
        ],
      },

Please advise a solution for this.

Answer 1

What you actually want to do is you want to use one Component inside of another. You almost never import a Component into another.

To use Component A inside Component B you need to have them either declared inside the same Module or Component A to be imported into Module where Component B is being declared.

If that requirement is met you can use Component A inside Component B by adding Component A's selector into the html of Component B. Then it is possible to communicate between the Components in a few ways, for example using their Inputs and Outputs.

To read more on Components and Modules:

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

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

To grasp the basics of using Components:

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