在派生的 angular class 中传递给 super 的自定义参数

Question

I am trying to use the ol sidebar from umbe1987/Turbo87 in an angular project.

I am extending a class but I need to transform constructor parameters in the derivedclass constructor before passing them to the superclass constructor.

I have to catch a dom div node from the current angular component (derivedclass) and pass it as the 'element' argument in the super call.

• If I let the already existing var element = document.getElementById(options.element) the dom is actually not being rendered by the time of constructor.

• If I go var element = this.mySidebarDiv.nativeElement(options.element) I get the following message: this'super' must be called before accessing 'this' in the constructor of a derived class.ts(17009)

1. How can overpass the warn when calling the viewChild property (this.mySidebarDiv)? This restriction is making me to pass a null element parameter.

2. I know the sidebar is actually will not be rendered until the specific lifecycle hook (ngAfterViewInit), but I need to catch the dom element before, in its constructor, to pass it to super conctructor, so how can I approach this?

Thank you

@Injectable()
export class ProjectInfoSidebarComponent extends Control {

  @ViewChild('sidebar') mySidebarDiv: ElementRef;

  _container;
  _tabitems;
  _panes;
  _closeButtons;
  classList;
  _sidebar;

  constructor(@Inject(String)opt_options) {

    var defaults = {
        element: null,
        position: 'left'
    }, i, child;

    var options = Object.assign({}, defaults, opt_options);

    //var element = document.getElementById(options.element);
    var element = this.mySidebarDiv.nativeElement(options.element)

    super({
        element: element,
        target: options.target
    });
    // super((() => {
    //   return {
    //     element: this.mySidebarDiv.nativeElement.querySelector(options.element),
    //     target: options.target
    //   }
    // })());

    // Attach .sidebar-left/right class
    element.classList.add('sidebar-' + options.position);
    ...
    ...
    ...

Answer 1

Instead of trying to combine ol5-sidebar and a custom Angular component into a single class, you should invert control and create a wrapper Angular component that creates a <div> and hands it over to an OLSidebar instance once it's rendered to the DOM.

Copy the ol5-sidebar.js file into your project directly from the Github repo you linked, then create a separate project-info-sidebar.component.ts like this:

import { Component, ViewChild, ElementRef, AfterViewInit, Inject, InjectionToken } from "@angular/core";
import OLSidebar from "./ol5-sidebar.js";

const SIDEBAR_OPTS = new InjectionToken<SidebarOptions>('SIDEBAR_OPTS');

interface SidebarOptions {
  /* default: `left` */
  position?: string;
  target: any; // not sure what the correct type is here
}

@Component({
  selector: "sidebar",
  template: "<div #sidebar></div>",
})
export class ProjectInfoSidebarComponent implements AfterViewInit {
  @ViewChild("sidebar") mySidebarDiv: ElementRef<HTMLDivElement>;

  sidebar: OLSidebar | null = null;

  constructor(@Inject(SIDEBAR_OPTS) private options: SidebarOptions) {}

  ngAfterViewInit() {
    // get a reference to the `<div>` we just rendered to the DOM
    const element = this.mySidebarDiv.nativeElement;

    // create an OLSidebar instance, which handles everything from here
    this.sidebar = new OLSidebar({
      element,
      target: this.options.target,
    });
  }
}