在 Ionic 中使用提供程序时如何使元素具体化答案

【问题标题】：How to make an element specific when using providers in Ionic在 Ionic 中使用提供程序时如何使元素具体化
【发布时间】：2018-04-21 10:49:00
【问题描述】：

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

我是 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">

【问题讨论】：

所以您想在 *ngIf 上检查您是否在应该显示特定标题/工具栏的页面上，对吗？
正确，如果我目前在该页面上，我不想提供任何特定的标题/工具栏，而是由实际页面指定一个。
首先，不要把ion-header和ion-content放在ion-content里面。其次，尝试在stackblitz.com 中重现您的问题并将链接分享给我们，因为您的错误与ngIf 无关

标签： angularjs typescript ionic2

【解决方案1】：

要使*ngIf 起作用，您必须在所有具有此*ngIf 的页面组件上定义变量page。如果您只在想要显示不同标题的页面上定义它，那么在所有其他没有定义变量 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'};

希望对你有帮助

【讨论】：

我确实在组件中定义了页面变量。当尝试你的离子内容代码时，我得到这个错误虽然 TypeError: Cannot read property 'isListening' of undefined at Menu._updateState (localhost:8100/build/vendor.js:86197:26) at Menu.paneChanged (localhost:8100/build/vendor.js:86232:14)
您是否在所有组件中为具有 *ngIf 检查 page.pageName 内容的页面定义了 page 变量？关于错误，我的回答中有一个错误，我现在已经编辑并修复了，请再试一次，让我知道它是否有效。

【解决方案2】：

经过一番调查，我找到了解决方案。通过将 ngIf 替换为 [hidden]，就成功了，见下文：

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

【讨论】：