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

Question

我在 Angular2 上有一个使用 NativeScript TypeScript 的应用程序，它由 AppComponent 和一个 LoginComponent 组成，由 NativeScript 的 Playground Web 应用程序通过拖放创建。我想将 applicationName 变量从 AppComponent 传递到 LoginComponent，但我没有运气这样做。我看过示例，但它们引用了模板，而本示例中的模板没有引用外部变量。参数只在组件之间传递。

出现登录屏幕，除了传递的 applicationName 外，一切正常。我不完全确定我错过了什么。

这不是parent/child关系吗？我找不到任何东西来表明它是否基于声明块描述。如果不是，是用于在对等组件之间传递参数的替代机制。

如有任何帮助，我们将不胜感激。

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 或使用可以注入任何组件并共享数据的服务。

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

Passing parameter to child or peer component from AppComponent in Angular2

angular

nativescript

angular2-nativescript

ng-modules