Question

我正在制作一个小型应用程序，其正面为Angular7，背面为Flask，我要做的是订阅服务，然后将返回的数据从主AppComponent内部保存到对象类型变量中，然后在我所有其他组件中访问此变量。

Api服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private http: HttpClient) { }

  CheckApi(){
    return this.http.get('http://localhost:5000/')
  }

}

AppComponent

import { Component, OnInit, Injectable } from '@angular/core';
import { ApiService } from './api.service'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  title = 'Inbox App';

  public text: object

  constructor(private data: ApiService){}

  ngOnInit(){
    this.data.CheckApi().subscribe(data => {
        this.text = data
        console.log(this.text)
    })
  }
}

这是我试图从另一个组件中访问该对象的地方：

LoginComponent

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

login.component.html

<section>
    <legend class="text-center">{{ text }}</legend>
</section>

Answer 1

这可以通过几种方法完成。最好是使用角度输入

import { Component, OnInit, Input } from '@angular/core';

@Component({
 selector: 'app-login',
 templateUrl: './login.component.html',
 styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
@Input() text: string; 
constructor() { }

ngOnInit() {
}

}

然后您可以像这样将变量从父组件传递到子组件

<app-login text="yourvariable or object"></app-login>

Answer 2

在App组件上使用可以从其他组件访问的公共属性不是在组件之间共享状态的常规Angular方式，因此我建议不要这样做。

我会在子组件上使用@Input，以便您可以将对象传递到子组件，更多信息在这里：https://angular.io/guide/component-interaction

否则，我将按https://medium.com/@weswhite/angular-behaviorsubject-service-60485ef064fc

所述将服务与BehaviorSubject一起使用

Answer 3

这可能是共享数据的最常见和最直接的方法。当存在父子关系时，它通过使用@Input（）装饰器来工作，以允许通过模板传递数据。您也可以查看@ViewChild Decorator。还可以查看EventEmitter。

在缺少直接连接的组件（例如兄弟姐妹，孙子等）之间传递数据时，应该使用共享服务。当您有应该同步的数据时，我发现RxJS BehaviorSubject在这种情况下非常有用。请参考以下链接：

https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/

Answer 4

我为此在我的项目中创建了服务，该服务将我想要的所有数据保存在对象属性中。然后可以从项目中的任何地方访问它。

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

@Injectable({
  providedIn: 'root'
})
export class DataStorage {
  private dataStorage = {};

  addData(key: string, data: any) {
    this.dataStorage[key] = data;
  }

  getData(key: string) {
    this.changed[key] = false;
    return this.dataStorage[key];
  }

  clearData(key: string) {
    this.dataStorage[key] = undefined;
  }
}

Angular-如何与所有组件共享应用变量

4 个答案: