如何在 Ionic 中使用提供程序时使元素特定

Question

在实现以下模式后，我希望只有特定的页面具有唯一的工具栏或标题。关于如何做到这一点的任何想法？我是否需要注入提供程序并将该页面作为独立页面？

我是Ionic的新手，所以如果这种情况不够清楚，请告诉我我当前的代码如下

<ion-content class="no-scroll">
        <ion-header *ngIf="page.pageName != 'MyPageWithUniqueToolbar'">
            <ion-toolbar color="primary" class="sub-header">
                <ion-title class="sub-header-titl1">{{ page.ToolbarTitle }}</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content class="no-scroll">
            <ion-nav class="content-body" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
        </ion-content>
    </ion-content>

我试图像这样放上面的ngif，但它出错了

<ion-content *ngIf="page.pageName != 'MyPageWithUniqueToolbar'" class="no-scroll">

Answer 1

要使该*ngIf正常工作，您必须在具有此*ngIf的所有页面组件上定义一个变量page。如果您只在要显示不同标题的页面上定义它，它将在所有其他未定义变量page上出错。

对此的快速解决方法是首先检查变量页面是否存在，然后检查 page.pageName 的值，如下所示：

<ion-header *ngIf="page && page.pageName != 'MyPageWithUniqueToolbar'">
    <ion-toolbar color="primary" class="sub-header">
        <ion-title class="sub-header-titl1">{{ page.ToolbarTitle }}</ion-title>
    </ion-toolbar>
</ion-header>
<ion-content class="no-scroll">
    <ion-nav class="content-body" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
</ion-content>

请记住，您需要在组件中定义的页面变量，例如

page = {pageName:'MyPageWithUniqueToolbar'};

希望对你有帮助

Answer 2

经过更多的调查，我找到了解决方案。通过将ngif替换为[隐藏]，这起到了作用，请参见下文：

<ion-nav [hidden]="page.pageName === 'MyPageWithUniqueToolbar'" class="content-body" name="bodyHeader" [root]="state.bodyHeader.current" #bodyHeader swipeBackEnabled="false"></ion-nav>