将参数从Angular2中的AppComponent传递给子组件或对等组件

Question

我在Angular2上的NativeScript TypeScript中有一个应用程序，由AppComponent和LoginComponent组成，由NativeScript的Playground web应用程序通过拖放创建。我想将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本身，或者使用可以注入任何组件并共享数据的服务。