时间戳

首页 > 解决方案 > 在 Angular CLI 中的两个组件之间发送数据：11.2.7

angular - 在 Angular CLI 中的两个组件之间发送数据：11.2.7

问题描述

我有以下 token-model.ts：

export class TokenModel {
    authToken: AuthToken;
    email;
    refreshToken: RefreshToken;
}

class AuthToken {
    stringToken
    username
    validTo;
}

class RefreshToken {
    stringToken
    username;
}

以及以下 tokenService.ts：

import { Injectable } from '@angular/core';
import { BehaviorSubject, ReplaySubject } from 'rxjs';
import { TokenModel } from '../models/token-model';


@Injectable()
export class TokenService {
    private tokenData = new ReplaySubject<TokenModel>(1);
    token = this.tokenData.asObservable();

    constructor(){}

    setTokenData(data){
        this.tokenData.next(data);
    }

    getTokenData(){
        return this.token;
    }
}

在我的登录组件中，我接收令牌数据并将其设置为令牌模型：

this.tokenService.setTokenData(data as TokenModel);

而且我相信数据设置正确，因为当我这样做时，它可以在某个深处找到 console.log(this.tokenService.getTokenData());

有了这个，我“全局”设置了数据，设置后我想在其他名为datepick 组件的组件中使用它。

从“全局状态服务”获取数据的主要设置是：

  1. 导入所需的东西，例如从 rxjs 订阅、令牌服务和令牌模型等。
  2. 定义订阅：订阅；
  3. 代币：代币模型；
  4. 定义 tokenService：构造函数中的 TokenService
  5. 并在需要来自 tokenService(auth token string from tokenModel) 的东西的函数中订阅： this.subscription = this.tokenService.token.subscribe((token: TokenModel) => { this.token = token; });

但是当 i 时console.log(this.token);，它说未定义。

正如我之前所说，当我console.log(this.tokenService.getTokenData());深入到观察者结构中时，我会找到设置到观察者中的数据。

当我调用另一个组件中的数据时，我做错了什么？

PS我对此做了一个精简版，只是在一个简单的消息服务中设置了一些字符串数据，但它仍然无法正常工作，所以tokenmodel或其他东西没有问题。

标签： angular

解决方案

错误出在我的错误中，我在 app.modules.ts 而不是 app.components.ts 中定义了提供者 TokenService，因此从未启用该服务作为组件之间的提供者。

推荐阅读