<ion-navbar> 中的“*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）

星号表示该指令将此组件视为模板，不会绘制它as-is。例如，ngFor 获取我们的并为项目中的每个项目将其标记出来，但它从不呈现我们的首字母，因为它是一个模板：

<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 代码。

<ion-navbar> 中的“*navbar”是什么意思？

What is the meaning of " *navbar " in <ion-navbar>?

angular

typescript

ionic2

ionic3