Передача параметра дочернему или одноранговому компоненту из AppComponent в Angular2

Question

У меня есть приложение в NativeScript TypeScript для Angular2, состоящее из AppComponent и LoginComponent, созданных путем перетаскивания веб-приложением Playground для NativeScript. Я хочу передать переменную applicationName из AppComponent в LoginComponent, но мне не повезло в этом. Я посмотрел на примеры, но они ссылаются на шаблоны, а шаблоны в этом примере не имеют ссылок на внешние переменные. Параметр должен передаваться только между компонентами.

Появляется экран входа в систему, и все работает, за исключением того, что передается applicationName. Я не совсем уверен, чего мне не хватает.

Разве это не отношения родитель / ребенок? Я не мог найти ничего, чтобы указать, было ли это основано на описаниях блока объявлений. Если нет, это альтернативный механизм, используемый для передачи параметров между равноправными компонентами.

Любая помощь будет оценена.

AppComponent выглядит следующим образом:

import ...

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

    constructor(private routerExtensions: RouterExtensions)
    {
    }
}

Соответствующая часть LoginComponent:

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
        });
    }
}

Оба эти компонента указаны в определении NgModule

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

Файл app-routing.module.js содержит

"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

Поскольку вы загружаете LoginComponent с маршрутизатора, вы не можете использовать @Input для передачи данных.Попробуйте внедрить data в Routes или использовать Сервис, который вы можете внедрить в любой компонент и обмениваться данными.