JiaLiPassion

var zoneA = Zone.current.fork({name: 'zoneA'});

function callback() {
  console.log('callback is invoked in context', Zone.current.name); 
}

zoneA.run(function() {
  console.log('I am in context', Zone.current.name); 
  setTimeout(zoneA.wrap(callback), 100);
});

JiaLiPassion

Zone.prototype.wrap = function(callback) {
  var zone = Zone.current; // keep zone context
  return function() {
    return zone.run(callback, this, arguments); // zone.run will make sure callback run into zone
  }
}

JiaLiPassion

var zoneA = Zone.current.fork({name: 'zoneA'});

function callback() {
  // Javascript engine context 2
  // Zone Context: zoneA
  
  // we can access the async execution context by call Zone.current
  console.log('ctx', Zone.current.name); // will be zoneA 
}

JiaLiPassion

function callback(ctx) {
  // access shared data from args
  console.log('callback invoked', ctx); // will be {data: 'onload data'}
}

window.onload = function() {
  setTimeout(callback, 100, {data: 'onload data'});
}

JiaLiPassion

var ctx = {
  data: 'data'
};
function callback() {
  // access shared data from global variable.
  console.log('callback invoked', ctx); // will be {data: 'onload data'}
}

window.onload = function() {
  ctx.data = 'onload data';

JiaLiPassion

function callback() {
  // context 2
  console.log('callback invoked');
}

window.onload = function() {
  // context 1  
  setTimeout(callback, 100); 
};

JiaLiPassion

 connectedCallback(): void {
   // subscribe to event emitters of Angular Component and dispatch Custom
   // Events
   const eventEmitters = this.componentFactory.outputs.map(propName => this.componentRef.instance as any)[propName]);
   this.outputEvents = merge(...eventEmitters);   
   this.ngElementEventsSubscription = this.outputEvents.subscribe(e => {
     const customEvent = document.createEvent('CustomEvent');
     customEvent.initCustomEvent(e.name, false, false, e.value);
     element.dispatchEvent(customEvent);
   });

JiaLiPassion

// Import stylesheets
import './style.css';

// Write Javascript code!
const appDiv = document.getElementById('app');
appDiv.innerText = 'App';
// register a event handler named 'highlight'
appDiv.addEventListener('highlight', function(event) {
  appDiv.innerText = 'App highlighted';
});

JiaLiPassion

customElements.define('hello-elem', HelloComponentClass);

JiaLiPassion

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [HelloComponent],
  entryComponents: [HelloComponent]
})
export class CustomElementsModule {
  ngDoBootstrap() {}
}