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

Question

我在Angular2上的NativeScript TypeScript中有一个应用程序，由AppComponent和LoginComponent组成，该应用程序是通过Playground Web应用程序通过拖放创建的，用于NativeScript。 我想将AppName变量从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传递数据。 尝试在Routes本身中注入data或使用可以注入任何组件并共享数据的服务。