3

每当我按照 ionic 的教程进行操作时，我都会看到这句话*navbar。这是什么意思？我知道 * 表示它正在模板中插入标签，但不能真正理解这个表达式。

<ion-navbar secondary *navbar>
  <ion-title>
    <ion-searchbar primary placeholder="enter subreddit name..."></ion-searchbar>
  </ion-title>

  <ion-buttons end>
    <button (click)="openSettings()"><ion-icon name="settings"></ion-icon></button>
  </ion-buttons>
</ion-navbar>
4

1 回答 1

3

就像你说的（就像你可以在这里阅读）

星号表示该指令将此组件视为模板，不会按原样绘制它。例如，ngFor 为 items 中的每个项目获取并标记它，但它从不呈现我们的初始值，因为它是一个模板：

<my-component *ngFor="#item of items">
</my-component>

因此，据我了解，*navbar告诉导航栏组件 ion-navbar 标签应该被模板替换，而不是在模板中呈现。这就是为什么你的代码：

<ion-navbar secondary *navbar>
  <ion-title>
    <ion-searchbar primary placeholder="enter subreddit name..."></ion-searchbar>
  </ion-title>

  <ion-buttons end>
    <button (click)="openSettings()"><ion-icon name="settings"></ion-icon></button>
  </ion-buttons>
</ion-navbar>

然后呈现为这样的东西：

<ion-navbar class="toolbar show-navbar" secondary="">
    <div class="toolbar-background"></div>
    <button category="bar-button" class="back-button bar-button bar-button-default"><span class="button-inner"><span class="button-inner"><ion-icon class="back-button-icon ion-md-arrow-back" role="img" aria-label="arrow back"></ion-icon><span class="back-button-text"><span class="back-default"></span></span>
        </span>
        <ion-button-effect></ion-button-effect>
        </span>
        <ion-button-effect></ion-button-effect>
    </button>
    <ion-buttons end="">
        <button class="bar-button bar-button-default bar-button-icon-only"><span class="button-inner"><ion-icon name="settings" role="img" class="ion-md-settings" aria-label="settings"></ion-icon></span>
            <ion-button-effect></ion-button-effect>
        </button>
    </ion-buttons>
    <div class="toolbar-content">
        <ion-title>
            <div class="toolbar-title">
                <ion-searchbar placeholder="enter subreddit name..." primary="" class="">
                    <div class="searchbar-input-container">
                        <button class="searchbar-md-cancel button button-clear button-icon-only button-clear-dark" clear="" dark=""><span class="button-inner"><ion-icon name="arrow-back" role="img" class="ion-md-arrow-back" aria-label="arrow back"></ion-icon></span>
                            <ion-button-effect></ion-button-effect>
                        </button>
                        <div class="searchbar-search-icon"></div>
                        <input autocapitalize="off" autocomplete="off" autocorrect="off" class="searchbar-input" spellcheck="false" type="search" placeholder="enter subreddit name...">
                        <button class="searchbar-clear-icon button button-clear" clear=""><span class="button-inner"></span>
                            <ion-button-effect></ion-button-effect>
                        </button>
                    </div>
                    <button class="searchbar-ios-cancel button button-clear activated" clear=""><span class="button-inner">Cancel</span>
                        <ion-button-effect style="left: -9999px; transform: scale(0.001) translateZ(0px);"></ion-button-effect>
                    </button>
                </ion-searchbar>
            </div>
        </ion-title>


    </div>
</ion-navbar>

不要太在意代码，我只是想向您展示您的看起来如此简单的代码是如何呈现为如此复杂的代码块的。

所以，我理解它的方式是，你只是对 Ionic 说你想使用navbar模板（通过使用*navbar），并发送有关标题、按钮以及它们应该有什么内容以及这些东西应该放在哪里的信息（具有类似的属性end）。然后 Ionic 将处理使用该信息来填写模板并呈现 HTML 代码。

于 2016-06-13T20:24:44.720 回答