如何从子组件中隐藏父组件？

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 }

我确实不想显示在这种情况下AppComponent.html 中使用的<progress-bar> 组件。事实上，我只想在导航到前四个组件之一（多步表单的一部分）时显示<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。

应用组件

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