Passing parameter to child or peer component from AppComponent in Angular2

Question

I have an application in NativeScript TypeScript on Angular2 consisting of the AppComponent and a LoginComponent as created through drag and drop by the Playground web application for NativeScript. I am wanting to pass the applicationName variable from the AppComponent to the LoginComponent but am not having any luck in doing so. I have looked at examples but they reference templates and the templates in this example have no reference to external variables. The parameter is only to be passed between components.

The login screen shows up and everything works with the exception of the applicationName being passed. I am not entirely sure what I am missing.

Is this not a parent/child relationship? I could find nothing to indicate whether or not it was based on the declarations block descriptions. If not, is an alternate mechanism used to pass parameters between peer components.

Any help would be appreciated.

The AppComponent looks as follows:

import ...

@Component({
    selector: "ns-app",
    templateUrl: "app.component.html"
})
export class AppComponent implements OnInit
{
    applicationName: string = "APP NAME";

    constructor(private routerExtensions: RouterExtensions)
    {
    }
}

The relevant portion of the LoginComponent is:

import { Component, ElementRef, Input} from "@angular/core";
import ...

@Component({
    selector: "app-login",
    moduleId: module.id,
    templateUrl: "./login.component.html",
    styleUrls: ['./login.component.css']
})
export class LoginComponent
{
    @Input() applicationName: string;

    ...

    alert(message: string)
    {
        return alert({
            title: this.applicationName,
            okButtonText: "OK",
            message: message
        });
    }
}

Both of these components are referenced in the NgModule definition

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        AppRoutingModule,
        NativeScriptCommonModule,
        NativeScriptModule,
        ...
    ],
    declarations: [
        AppComponent,
        LoginComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

The app-routing.module.js file contains

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var router_1 = require("nativescript-angular/router");
var login_component_1 = require("./login/login.component");
exports.routes = [
    { path: "", redirectTo: "/login", pathMatch: "full" },
    { path: "login", component: login_component_1.LoginComponent },
    { path: "home", loadChildren: "./home/home.module#HomeModule" },
    ...
];
var AppRoutingModule = /** @class */ (function () {
    function AppRoutingModule() {
    }
    AppRoutingModule = __decorate([
        core_1.NgModule({
            imports: [router_1.NativeScriptRouterModule.forRoot(exports.routes)],
            exports: [router_1.NativeScriptRouterModule]
        })
    ], AppRoutingModule);
    return AppRoutingModule;
}());
exports.AppRoutingModule = AppRoutingModule;

Answer 1

Since you are loading LoginComponent from router, you can't use @Input to pass data. Try to inject data in Routes itself or use a Service which you can inject into any component and share data.