Question

我正在使用DynamicComponentLoader.loadIntoLocation()加载组件。加载的组件包含我想要添加到父窗体的控件组。我创建了一个demo。这是我要添加到父表单的代码。

@Component({ 
  selector: 'some-component',
  template: `
    <div>  
      <label>label</label>  
      <input type="text" [ngFormControl]="childform.controls['name']">  
    </div> 
  `
})                   
class SomeComponent {
  public childform: ControlGroup;

  constructor(fbs: FormBuilder) {  
    this.childform = fbs.group({  
      'name':  ['', Validators.required]  
    });
  }
}

如何将组件SomeComponent的控制组添加到父组件。我可以添加FakeComponent但不是SomeComponent的控件组。

Answer 1

您的toComponent方法正在返回FakeComponent而不是您想要的SomeComponent。

function toComponent(template, directives) {
  @Component({ 
    selector: 'fake-component',
    template,directives
  })

  class FakeComponent {

    public fakeForm: ControlGroup;
    constructor(fb: FormBuilder) {  
      this.fakeForm = fb.group({  
        'dummy':['']
      });
      //this.myForm1.addControl('main',directives[0]);
      //this.myForm1.updateValueAndValidity();
    }
  }
  return FakeComponent; // <-- ALWAYS returns FakeComponent
}

相反，您需要更改它以返回新组件，或者将所有方法一起取出并使用

loadIntoLocation(SomeComponent, this.elementRef,'container');

<强>更新

我现在看到了你的意图。我确实理解你要完成的任务。但是，最大的问题在于代码的@Component({template,directives})部分。这里的大差异在于指令在编译时而不是运行时处理。如果你看一下打字稿输出，你就会明白我的意思。

每个@Component指令都被转换为javascript，并且对构造函数的引用被粘合到ReflectAPI defineMetadata函数中。这些不会像您想象的那样在运行时进行评估，而是立即运行，为您的组件设置基础元数据。

我怀疑你需要做的是使用DCL加载FakeComponent，然后使用DCL加载SomeComponent。

如何使用DCL loadintolocation获取加载的组件的控件组值？

1 个答案: