Merge pull request #9 from patricklx/support-outlet

support outlet

README.md

@@ -97,6 +97,24 @@ class MyRouteComponent extends Component {
 export default RoutableComponentRoute(MyRouteComponent);
 ```
 
+You can also use outlets like this:
+
+```gjs
+// app/routes/my-route.gjs
+import RoutableComponentRoute from 'ember-routable-component';
+import Component from "@glimmer/component";
+
+class MyRouteComponent extends Component {
+  <template>Hello, {{this.message}}. Why was I screaming? {{yield to='outlet'}}</template>
+
+  get message() {
+    return String(this.args.model).toUpperCase();
+  }
+}
+
+export default RoutableComponentRoute(MyRouteComponent);
+```
+
 With this feature, it eliminates most of the reasons for needing controllers,
 other than for query params (which is another coherence gap Polaris would need
 to address). We suggest exploring moving your non-QP controller logic into a

ember-routable-component/src/templates/ember-routable-component/ember-route-template.js

@@ -1,2 +1,3 @@
 import { precompileTemplate } from '@ember/template-compilation';
-export default precompileTemplate("<this.Component @model={{this.model}} @controller={{this}} />");
+
+export default precompileTemplate("<this.Component @model={{this.model}} @controller={{this}}><:outlet>{{outlet}}</:outlet></this.Component>");

test-app/app/router.ts

@@ -13,4 +13,7 @@ Router.map(function () {
   this.route('model-works', { path: 'model-works/:id' });
   this.route('controller-works', { path: 'controller-works/:id' });
   this.route('component-works', { path: 'component-works/:id' });
+  this.route('outlet-works',function() {
+    this.route('sub-route');
+  });
 });

test-app/app/routes/outlet-works.gts

@@ -0,0 +1,14 @@
+import Route from 'ember-routable-component';
+import ControllerWorksController from 'test-app/controllers/controller-works';
+
+interface Signature {
+  Args: {
+    controller: ControllerWorksController;
+  };
+}
+
+export default class ComponentWorksRoute extends Route<Signature>(
+  <template>hello, outlet: {{yield to='outlet'}}</template>,
+) {
+
+}

test-app/app/routes/outlet-works/sub-route.gts

@@ -0,0 +1,12 @@
+import Route from 'ember-routable-component';
+import ControllerWorksController from 'test-app/controllers/controller-works';
+
+interface Signature {
+  Args: {
+    controller: ControllerWorksController;
+  };
+}
+
+export default Route<Signature>(
+  <template>hello sub route</template>,
+);

test-app/app/routes/sub-route/index.gts

@@ -0,0 +1,12 @@
+import Route from 'ember-routable-component';
+import ControllerWorksController from 'test-app/controllers/controller-works';
+
+interface Signature {
+  Args: {
+    controller: ControllerWorksController;
+  };
+}
+
+export default Route<Signature>(
+  <template>hello sub route</template>,
+);