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

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 应用程序，方法是将其包含在 razor 视图中：

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>

所以我有两个问题：

有隐藏进度条的快捷方式吗？
我觉得我的 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>

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

How to hide a parent component from a child component?

angular

angular-ui-router