如何從子組件中隱藏父組件？

Question

當我的Angular應用程序啟動時，它使用我的AppComponent，我已經定義如下：

AppComponent.ts：

import { Component } from '@angular/core';
@Component({
  selector: 'rfq-app',
  templateUrl: "./app.component.html",
  styles: []
})

export class AppComponent {
    title = 'Test';
}

AppComponent.html：

<section>
    <div class="container">
        <div class="board">
            <div class="progressbar">
                <progress-bar></progress-bar>
            </div>

            <div class="tab-content">
                <router-outlet></router-outlet>
            </div>
        </div>
    </div>
</section>

我使用在其自己的文件中定義的以下路由定義：

export const appRoutes: Routes = [
    { path: 'product/:code', component: ProductComponent  },
    { path: 'personal', component: PersonalComponent, canActivate: [WorkflowGuard] },
    { path: 'supplier', component: SupplierComponent, canActivate: [WorkflowGuard] },
    { path: 'summary', component: SummaryComponent, canActivate: [WorkflowGuard] },
    { path: 'products', component: ProductFilterComponent },
];

這一直很好。 我可以導航到路線，然后將根據需要加載組件。 但是，當我添加最后一條路線時：

{ path: 'products', component: ProductFilterComponent }

我不想顯示<progress-bar>中使用的組件AppComponent.html在這種情況下。 實際上，當我導航到四個第一個組件之一（多步表單的一部分）時，我只想顯示<progress-bar> ，即ProductComponent, PersonalComponent, SupplierComponent, SummaryComponent 。

對於所有其他路由（目前只有一個路由： ProductFilterComponent ），我只想顯示不帶<progress-bar>的組件。

在我的ProductFilterComponent我嘗試執行以下操作：

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

並在CSS樣式表中添加了

.progressbar {
    display: none;
}

為了隱藏包含進度條的div。 如果我直接從瀏覽器開發工具中執行此操作，則它會將其隱藏，但似乎無法從ProductFilterComponent應用此CSS。

我將通過在剃刀視圖中包含它來從我的Asp網絡核心后端啟動Angular應用程序：

Index.cshtml

@section Scripts {
    <script src="~/ClientApp/dist/inline.bundle.js"></script>
    <script src="~/ClientApp/dist/polyfills.bundle.js"></script>
    <script src="~/ClientApp/dist/styles.bundle.js"></script>
    <script src="~/ClientApp/dist/vendor.bundle.js"></script>
    <script src="~/ClientApp/dist/main.bundle.js"></script>
}

<rfq-app></rfq-app>

---

所以我有兩個問題：

1. 有沒有一種快速簡便的方法來隱藏進度條？
2. 我覺得我的Angular應用程序設計不正確。 進度欄的位置過高。 但是我不確定如何降低它的水平，因此只有某些組件可以使用它。 我應該更改設計嗎（如果是），正確的方法是什么？

Answer 1

我認為您需要一個簡單的服務：

@Injectable()
export class LoadingService {
    $loading: BehaviourSubject<boolean> = new BehaviourSubject(true);

    constructor(){}

    public startLoading(): void {
        this.$loading.next(true);
    }

    public stopLoading(): void {
        this.$loading.next(false);
    }
}

提供並注入此服務，並在需要時調用startLoading和stopLoading 。

AppComponent

<div *ngIf="loadingService.$loading | async" class="progressbar">
    <progress-bar></progress-bar>
</div>