Question

＆lt; p＆gt;我在组件com-A＆lt; / p＆gt;中有一个图像上传器。＆LT; p为H. COM-A＆LT; / p为H. ＆LT;预＆GT;＆LT;代码＆GT;上传图片（）{ if（sucess）{ this.profileImage = response（）。image; } ＆LT; /代码＆GT;＆LT; /预＆GT; ＆lt; p＆gt;我在com-B＆lt; / p＆gt;中有一个导航栏＆LT; p为H. COM-B＆LT; / p为H. ＆LT;预＆GT;＆LT;代码＆GT; this.navbarImage = imageUrl; ＆LT; /代码＆GT;＆LT; /预＆GT; ＆lt; p＆gt;我希望this.navabarImage是response（）。image，即最新图片。＆lt; / p＆gt; ＆lt; p＆gt;我想使用最新更改的图像更新导航栏中的图像，但我无法从com-A＆lt; / p＆gt;中调用com-B中的varable ＆lt; p＆gt;任何人都可以建议帮助。谢谢。＆lt; / p＆gt;

Answer 1

我建议您查看Angular基础知识中的Component Interaction部分。我将为您提供一个问题示例：

创建一个服务，该服务将公开一个方法，以通知应用程序的任何其他部分图像已被更改：

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

@Injectable()
export class NavbarService {
  // Observable string source
  private profileImageUpdatedSource = new Subject<string>();

  // Observable string stream
  profileImageUpdated$ = this.profileImageUpdatedSource.asObservable();

  // Service message command
  updateImage(url: string) {
    this.profileImageUpdatedSource.next(url);
  }
}

将NavbarService注入您的com-A并在之后调用updateImage方法图片正在更新：

uploadImage() {
    if(sucess) {
      this.profileImage = response().image;
      this.navbarService.updateImage(this.profileImage);
    }
}

将NavbarService注入您的com-B并订阅profileImageUpdated$：

export class ComponentB implements OnInit, OnDestroy {
    private navbarImage: string;
    private profileImageUpdated$: Subscription;

    constructor(private readonly navbarService: NavbarService) { }

    ngOnInit() : void {
        this.profileImageUpdated$ = this.navbarService.profileImageUpdated$
            .subscribe(url => this.navbarImage = url);
    }

    ngOnDestroy(): void {
        // do not forget to unsubscribe
        this.profileImageUpdated$.unsubscribe();
    }
}

有关详细信息，请参阅this section。

Answer 2

要在组件之间共享数据，您可以使用服务。我在这里有一个例子：https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

基本服务代码如下所示：

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

    @Injectable() 
    export class DataService {
      serviceData: string; 
    }

where＆＃34; serviceData＆＃34;在我的示例中，您将要分享任何属性，例如您的图像。有关如何使用此服务的详细信息，请参阅链接。

如何在角度2中调用其他组件中的变量

2 个答案: