Deprecation Guide for Deprecate Route#disconnectOutlet

Route#disconnectOutlet is intended to be used in conjunction with Route#render. As render is deprecated and disconnectOutlet is primarily used to teardown named outlets setup by render, it is also deprecated. See RFC #491.

The migration path is the same as the one defined for Route#render where components should be used instead of named outlets. A developer should wrap the component in a conditional if they want to control its destruction.

Given:

class CheckoutRoute extends Route {
  // ...

  @action
  showModal() {
    this.render('modal', {
      outlet: 'modal',
      into: 'application'
    });
  }

  @action
  hideModal() {
    this.disconnectOutlet('modal');
  }
}

{{! app/templates/checkout.hbs}}
<button {{on "click" this.showModal}}>Show Modal</button>
<button {{on "click" this.closeModal}}>Close Modal</button>

{{! app/templates/application.hbs}}
{{outlet "modal"}}

<main>
  {{outlet}}
</main>

This can transitioned to:

class CheckoutController extends Controller {
  // ...
  @tracked isModalOpen = false;

  init() {
    super.init();
    this.modalElement = document.getElementById('modal');
  }

  @action
  showModal() {
    this.isModalOpen = true;
  }

  @action
  closeModal() {
    this.isModalOpen = false;
  }
}

{{! app/templates/checkout.hbs}}
<button {{on "click" this.showModal}}>Show Modal</button>
<button {{on "click" this.closeModal}}>Close Modal</button>

{{#if this.isModalOpen}}
  {{#in-element this.modalElement}}
    <Modal />
  {{/in-element}}
{{/if}}

{{! app/templates/application.hbs}}
<div id="modal"></div>

<main>
  {{outlet}}
</main>

The above example will conditionally append the modal component into div#modal whenever the user toggles the modal.