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

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>