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>

所以我有两个问题：

是否有一种快速简便的方法来隐藏进度条？
我觉得我的Angular应用程序的设计不对。进度条处于过高的水平。但是我不确定如何降低它的水平，所以只有一些组件才能使用它。我应该改变我的设计，如果是，那么正确的做法是什么？

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

0 个答案: