ng-alain 表单组件的传参问题

代码如下,我希望title可以根据@input内穿的参动态改变,怎么实现呢?

 @Input()
  id: string;
  pageTitleName: string;

  @ViewChild('sf', { static: false }) sf: SFComponent;
  formData = {};
  schema = {
    properties: {
      creator: {
        type: 'string',
        title: '名称',
      },
      gender: {
        type: 'string',
        title: '性别',
        ui: {
          widget: 'radio',
          asyncData: () =>
            of([
              { label: '男', value: 'Man' },
              { label: '女', value: 'Woman' },
            ]).pipe(delay(100)),
          grid: {
            span: 12,
          },
        } as SFRadioWidgetSchema,
        default: '',
      },
      type: {
        type: 'string',
        title: '记录类型',
      },
      title: {
        type: 'string',
        title: this.pageTitleName,
      },
      description: {
        type: 'string',
        title: '详情',
      },
      startDate: {
        type: 'string',
        title: '开始时间',
        format: 'date',
      },
      endDate: {
        type: 'string',
        title: '结束时间',
        format: 'date',
      },
    },
    ui: {
      spanLabelFixed: 70,
      grid: {
        span: 24,
      },
    },
    required: ['title', 'creator', 'gender', 'type', 'description', 'startDate', 'endDate'],
  };
  layout = 'horizontal';

取不到值。已找到解决方法,在ngoninit中把对象属性重写就好了。谢谢大家

参考GPT和自己的思路:

要实现title动态改变的功能,可以使用ngOnChanges生命周期钩子函数来监听输入属性的值变化,从而在变化时更新标题。具体实现如下:

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-form',
  template: `
    <div>
      <form sf [schema]="schema" [ui]="ui" [formData]="formData" [layout]="layout" (formSubmit)="submit($event)"></form>
    </div>
  `,
})
export class FormComponent implements OnChanges {
  @Input() id: string;
  @Input() pageTitleName: string;

  @ViewChild('sf', { static: false }) sf: SFComponent;
  formData = {};

  schema = {
    // ...

    properties: {
      // ...

      title: {
        type: 'string',
        title: '',
      },

      // ...
    },
    // ...
  };

  ngOnChanges(changes: SimpleChanges) {
    if (changes.pageTitleName) {
      this.schema.properties.title.title = changes.pageTitleName.currentValue;
    }
  }
}

在上面的代码中,我们通过ngOnChanges钩子函数来监听pageTitleName属性的变化,如果该属性变化,就更新schema中的title属性的title字段。这样就可以实现标题的动态更新了。