Question

我正在通过rounter.navigate传递一些数据。然后数据将用作api的参数。但我想知道是否有可能在不导航的情况下传递数据。因为我在仪表板上有2个选项。要求身份和雇员。我需要同时传递数据。在声明状态下，我可以导航，因为登录后需要显示主屏幕。但是对于“员工”选项卡，我该怎么办？

  if(this.loginForm.value.email == 'samad' && this.loginForm.value.password == 'admin'){
    console.log(`found corresponding user.`);
  this.router.navigate(['/dashboard/home', {company_id: '659' , policy: '' }]);
  }

这是将一些数据导航到首页的代码。但是我也需要共享它以应用组件。谢谢

Answer 1

有四种方法可以做到这一点。

父级：通过输入共享数据
孩子与父母：通过ViewChild共享数据
孩子与父母：通过Output（）和EventEmitter共享数据
不相关的组件：与服务共享数据您可以在AngularFirebase.com的Jeff Delaney的this美丽的博客文章中找到所有这些实现

希望您能找到答案。

Answer 2

使用应用程序提供商可以做到这一点

import { Injectable } from '@angular/core';

@Injectable()
export class Data {

    public storage: any;

    public constructor() { }

}

此提供程序具有一个称为storage的公共变量，可用于   我们注入它的任何页面。此变量将是同一实例   在每个页面上。

话虽如此，让我们重新访问第一页：

import {Component} from "@angular/core";
import {Router, NavigationExtras} from "@angular/router";
import { Data } from "../../providers/data/data";

@Component({
    selector: "page1",
    templateUrl: "./components/page1/page1.html",
})
export class Page1Component {

    public constructor(private router: Router, private data: Data) {}

    public onTap() {
        this.data.storage = {
            "firstname": "Nic",
            "lastname": "Raboy",
            "address": {
                "city": "San Francisco",
                "state": "California"
            }
        }
        this.router.navigate(["page2"]);
    }

}

请注意我们如何将数据提供程序注入我们的页面，以及在计划导航之前将其设置为对象？关于接收页面，我们可以执行以下操作：

import {Component} from "@angular/core";
import { Data } from "../../providers/data/data";

@Component({
    selector: "page2",
    templateUrl: "./components/page2/page2.html",
})
export class Page2Component {

    public constructor(private data: Data) {
        console.log(JSON.stringify(this.data.storage));
    }

}

请注意，我们再次注入了数据提供程序，但没有进行设置   它，我们正在阅读它。

只需清除所有松散的结局，即可在   该应用程序的@NgModule如下所示：

//应该首先进行此导入，以加载一些必需的设置   （例如全局变量和反射元数据）

import { platformNativeScriptDynamic, NativeScriptModule } from "nativescript-angular/platform";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { appComponents, appRoutes } from "./app.routing";
import { Data } from "./providers/data/data";

@NgModule({
    declarations: [AppComponent, ...appComponents],
    bootstrap: [AppComponent],
    imports: [
        NativeScriptModule,
        NativeScriptRouterModule,
        NativeScriptRouterModule.forRoot(appRoutes)
    ],
    providers: [Data]
})
class AppComponentModule {}

platformNativeScriptDynamic().bootstrapModule(AppComponentModule);

请注意我们如何在上面的代码中包含提供商。

Answer 3

您可以将该数据存储在服务中，然后将其注入需要访问的组件中。创建jsfiddle示例很好。这样您可以获得更好的答案。

无需导航的角度传递数据

3 个答案: