angular - 中的 "*navbar "是什么意思？

Question

每当我学习 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>

Answer 1

就像你说的(就像你能读懂 here 一样)

星号表示该指令将此组件视为模板，不会按原样绘制。例如，ngFor 获取 our 并将其标记为 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 代码。