代码如下,我希望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字段。这样就可以实现标题的动态更新了。