Question

我有一个Datepicker控制组件，该组件位于其自己的dp模块中。

@Component({
  selector: 'app-datepicker-demo',
  templateUrl: './datepicker.component.html',
  styleUrls: ['./datepicker.component.scss'],
})
export class DemoPopupDatePickerComponent implements OnInit {
  @Input() group: FormGroup;
  @Input() componentName: string;
  dateTimeControl: FormControl;
  constructor() {}
  ngOnInit(): void {
    console.log(this.group);
    console.log(this.componentName);
    this.dateTimeControl = new FormControl('');

    this.group = new FormGroup({});
    this.group.addControl('dateTime', this.dateTimeControl);
  }

另一个模块中有一个表单，该表单利用了dp模块中的datepicker组件。我已经导入了dp模块并使用了

<app-datepicker-demo
  #dateTime1
  [componentName]="'dateTime1'"
></app-datepicker-demo>

控件已很好地加载到UI中，并且触发了验证。但是当我尝试获取/传递值到ngafterviewinit中选择的日期时，其显示未定义。

export class ReuseFormComponent implements OnInit, AfterViewInit {
  @ViewChild('dateTime1', { static: false })
  dateTimeComponent: DemoPopupDatePickerComponent;
  @ViewChild('dateTime2', { static: false })
  dateTimeComponentdual: DemoPopupDatePickerComponent;

  reusableForm = new FormGroup({});

  constructor() {}

  ngOnInit(): void {}

  ngAfterViewInit() {
// This this.dateTimeComponent.group is showing undefined
        this.reusableForm.addControl('dateTime1', this.dateTimeComponent.group);
        this.dateTimeComponent.group.setParent(this.reusableForm);

    this.reusableForm.addControl('dateTime2', this.dateTimeComponentdual.group);
    this.dateTimeComponentdual.group.setParent(this.reusableForm);
  }

在调试datepicker组件本身时，在父组件中未定义。我认为由于延迟加载，生命周期调用时未加载我的子组件。我不确定如何传递/获取值。

在注册表表格模块中的路线：

const routes: Routes = [{ path: '', component: RegisterComponent }];

应用模块中的路由

const routes: Routes = [
  { path: 'Register', loadChildren: () => import('./modules/registration/register.module').then(m => m.RegisterModule) }
];

注意：我已经尝试过在没有单独模块的情况下进行相同的操作，例如创建两个组件datepicker并注册表格并将其直接注册到app.module 并尝试了同样的方法，效果很好。

子组件在父组件角度9

0 个答案: