【问题标题】：How to change the route and make the observable work?如何改变路线并使可观察的工作？
【发布时间】：2020-07-19 15:32:31
【问题描述】：

我正在尝试从 observable 加载信息，当我输入路由时它会正确加载，但是当我使用 routerLink 更改路由时，observable 会停止使用管道异步显示信息。

我展示observable信息的方式是这样的：

配置文件组件

<ng-container *ngIf="this.observable| async as profilevar; else loading">
    <div class="main-content">
        <div class="profile-content shadow">
            <div class="profile-content-top">
                <div class="profile-image">
                    <div class="profile-image-avatar">
                        <img src="{{ profilevar?.profile_url }} "

这将是包含更改路线的元素的组件：

导航栏组件

<div class="nav-bar-mobile">
    <div class="element-bar profile" routerLink="/profile" routerLinkActive="selecteditem">
        <i class="fas fa-user-circle"></i>
    </div>
    <div class="element-bar settigs" routerLink="/settings" routerLinkActive="selecteditem">
        <i class="fas fa-cog"></i>
    </div>
</div>

有效的方法：

直接从浏览器路径加载数据

什么不起作用：

当我使用导航栏组件和 routerLink 更改路线时

变量 this.observable 包含 this.db.object('/profiles/' + vid).valueChanges()

我该如何解决这个问题？

【问题讨论】：

标签： angular firebase asynchronous observable routerlink

【解决方案1】：

已解决

经过调查，我找到了解决问题的方法！

我设法通过在订阅类型变量中分配我的 observable 来解决它。

    export class ProfileComponent implements OnInit, OnDestroy {

        subscriptionObservable: Subscription;
        observable: Observable<Profile>;
        
        constructor(){
            this.subscriptionObservable = this.observable.subscribe((data: Profile) => 
            {...}));
        }
    
        ngOnDestroy() {
            if (this.subscriptionObservable) {
            this.subscriptionObservable.unsubscribe();
            }
        }
    }

完成组件后，我取消订阅 subscriptionObservable 变量！

【讨论】：