Góc CDK: Cách đặt đầu vào trong ComponentPortal

Question

Tôi muốn sử dụng Portal mới từ tài liệu CDK để chèn nội dung động vào nhiều phần của biểu mẫu.

Tôi có cấu trúc biểu mẫu phức tạp và mục tiêu là có biểu mẫu chỉ định nhiều nơi mà các thành phần phụ có thể (hoặc không) chèn mẫu.

Có lẽ Cổng CDK không phải là giải pháp tốt nhất cho việc này?

tôi đã cố gắng một cái gì đó nhưng tôi chắc chắn nó không phải là cách làm: https://stackblitz.com/edit/angular-yuz1kg

Tôi cũng đã cố gắng với new ComponentPortal(MyPortalComponent) nhưng làm thế nào chúng ta có thể thiết lập đầu vào trên nó? Thông thường là một cái gì đó như componentRef.component.instance.myInput

Answer 1

Bạn có thể tạo bộ phun tùy chỉnh và đưa nó vào cổng thành phần mà bạn tạo. -

createInjector(dataToPass): PortalInjector { 
    const injectorTokens = new WeakMap(); 
    injectorTokens.set(CONTAINER_DATA, data); 
    return new PortalInjector(this._injector, injectorTokens); 
    } 

CONTAINER_DATA là một vòi phun tùy chỉnh (InjectorToken) tạo ra bởi -

export const CONTAINER_DATA = new InjectionToken<{}>('CONTAINER_DATA'); 

Để tiêu thụ tạo phun, sử dụng -

let containerPortal = new ComponentPortal(ComponentToPort, null, this.createInjector({ 
      data1, 
      data2 
     })); 

    overlay.attach(containerPortal); 

lớp phủ là thể hiện của OverlayRef (Đó là Portal Outlet)

Bên trong "ComponentToPort", bạn sẽ cần phải tiêm kim phun đã tạo -

@Inject(CONTAINER_DATA) public componentData: any 

Thông tin thêm về điều này ở đây -

1. https://github.com/angular/material2/issues/8322

2. https://github.com/angular/material2/issues/8322