Angular - 将输入传递给 ng-content 组件

Posted

技术标签:

【中文标题】Angular - 将输入传递给 ng-content 组件【英文标题】:Angular - Pass input to ng-content component 【发布时间】:2021-04-21 14:21:02 【问题描述】:

我有一个带有 ng-content 的模态组件。在这个 ng-content 中,我可以通过注入器传递其他组件。无论如何,我需要在其中传递一个对象来编辑数据。但我需要一些帮助。这是模态组件html

<div class="modal">
  <div class="modal-body">
     this is my Object: model | json
    <ng-content></ng-content>
  </div>

  <div class="modal-footer">
    <button (click)="sendMessage()">success</button>
    <button>abort</button>
  </div>
</div>

ng-content 中的组件可能会有所不同。在我的示例中,我有一个输入。我需要在该组件中传递一个模型。

我使用带有注入器的服务将内容传递到我的 modalComponent,并在函数“open”中定义了一个参数 obj,它是我需要在 ng-content 组件中查看的对象。 (参数存储在我的模态组件的“模型”输入中)。

@Injectable()
export class ModalService 
  dialogComponentRef: ComponentRef<ModalComponent>;
  private subject = new Subject<any>();

  open(content: any, obj: any) 
    const contentComponentFactory = this.cfResolver.resolveComponentFactory(content);
    const modalComponentFactory = this.cfResolver.resolveComponentFactory(ModalComponent);

    const contentComponent = contentComponentFactory.create(this.injector);
    const modalComponent = modalComponentFactory.create(this.injector, [[contentComponent.location.nativeElement]]);

    modalComponent.instance.model = obj;

    this.dialogComponentRef = modalComponent;

    document.body.appendChild(modalComponent.location.nativeElement);

    this.appRef.attachView(contentComponent.hostView);
    this.appRef.attachView(modalComponent.hostView);
  

这是我的 modalComponent 类:

export class ModalComponent 
  @Input() model: any;

  sendMessage() 
    this.modalService.sendMessage();
  

  constructor(private modalService: ModalService) 


因此我用这个html定义了一个组件:

<input type="text" value="name" placeholder="name">

在此输入中,我希望看到用于编辑此值的对象。

我找不到将对象包含在内容组件中的解决方案....我需要它,因为我有一个必须编辑一些值的表单。

这是我的 stackblitz 示例:Example

【问题讨论】:

所以你要传递表单组件和一些预填充的值(表单中要传递的数据?) 是的。一个组件,它有一个表单,并最终在表单中传递一个对象。 【参考方案1】:

您可以做的是将 formData 分配给服务的属性,然后在内容组件的 ngOnInit() 中读取该属性,我尝试了下面的代码,它对我有用。

 @Injectable()
    export class ModalService 
      dialogComponentRef: ComponentRef<ModalComponent>;
      formData:any;
      private subject = new Subject<any>();
    
      open(content: any, obj: any) 
       this.formData = obj;
        const contentComponentFactory = this.cfResolver.resolveComponentFactory(content);
        const modalComponentFactory = this.cfResolver.resolveComponentFactory(ModalComponent);
    
        const contentComponent = contentComponentFactory.create(this.injector);
        const modalComponent = modalComponentFactory.create(this.injector, [[contentComponent.location.nativeElement]]);
    
        modalComponent.instance.model = obj;
    
        this.dialogComponentRef = modalComponent;
    
        document.body.appendChild(modalComponent.location.nativeElement);
    
        this.appRef.attachView(contentComponent.hostView);
        this.appRef.attachView(modalComponent.hostView);
      
    

在内容组件的ngOnInit()中,

ngOnInit() 
   this.name = this.modalService.formData.name;

但是您可以尝试将此属性包装在服务内部的某个函数中,而不是直接访问该属性(getFormData() 或其他东西)

【讨论】:

以上是关于Angular - 将输入传递给 ng-content 组件的主要内容,如果未能解决你的问题,请参考以下文章

在 Angular 8 中,如何将一个组件传递给另一个组件的输入,然后在路由器模块中强制使用它

Angular将多个模板传递给组件

Angular 2+将指令传递给自定义组件

如何将多个变量传递给 Angular 2 中的组件?

将复选框值传递给 Angular 的 ng-click

如何获取 Angular 输入指令数据以传递给控制器