Nested route action-up

components.my-component\.js

import Component from '@ember/component';

export default Component.extend({
  
  
});

controllers.application\.js

import Controller from '@ember/controller';

export default Controller.extend({
});

controllers.route1.route2.route3.route4\.js

import Controller from '@ember/controller';

export default Controller.extend({
  
  actions: {
   
   sayHai(){
     	alert('Haiii...');
      
      this.send('sayHello');
    }
  }
  
});

controllers.route1.route2.route3\.js

import Controller from '@ember/controller';

export default Controller.extend({
});

controllers.route1.route2\.js

import Controller from '@ember/controller';

export default Controller.extend({
});

controllers.route1\.js

import Controller from '@ember/controller';

export default Controller.extend({
});

router\.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  
   this.route('route1', { path: '/1' }, function() {
		this.route('route2', { path: '/2' }, function() {
			this.route('route3', { path: '/3' }, function() {
      	this.route('route4', { path: '/4' }, function() {});
			});
    });
   });
});

export default Router;

routes.application\.js

import Route from '@ember/routing/route';

export default Route.extend({

  actions: {
   sayHello(){
   	alert('Hello!! --> From Application Route');
   }
  }
  
});

routes.route1.route2.route3.route4\.js

import Route from '@ember/routing/route';

export default Route.extend({
});

routes.route1.route2.route3\.js

import Route from '@ember/routing/route';

export default Route.extend({

});

routes.route1.route2\.js

import Route from '@ember/routing/route';

export default Route.extend({
  
});

routes.route1\.js

import Route from '@ember/routing/route';

export default Route.extend({
  
});

templates.application\.hbs

<h1>Nested app with Action-up</h1>
<hr>
<br>

Application Route : {{#link-to 'route1.route2.route3.route4'}} Go to Route 1 {{/link-to}} 
<br>
<br>
{{outlet}}

templates.components.my-component\.hbs

{{log this}}
<br><br><hr><br>
<center>
	
  <b {{action sayHello}}>Say Hello..!!</b>
  
</center>

<br>
<hr>

{{yield}}

templates.route1.route2.route3.route4\.hbs

<MyComponent @sayHello={{action 'sayHai'}}/>


<div {{action 'sayHello'}}>:::: Click me..</div>

{{outlet}}

templates.route1.route2.route3\.hbs

This is Route 3 : {{#link-to 'route1.route2.route3.route4'}} Go to Route 4 {{/link-to}}
<br><br>

{{outlet}}

templates.route1.route2\.hbs

This is Route 2 : {{#link-to 'route1.route2.route3'}} Go to Route 3 {{/link-to}} 
<br><br> 

{{outlet}}

templates.route1\.hbs

This is Route 1 : {{#link-to 'route1.route2'}} Go to Route 2 {{/link-to}}
<br><br>

{{outlet}}

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}