Question

每当我按照离子教程，我都会看到短语meteor。这是什么意思？我知道*意味着它将标签插入模板中，但无法理解这个表达式..

*navbar

Answer 1

就像你说的那样（就像你可以阅读here）

星号表示此指令将此组件视为模板，不会按原样绘制。例如，ngFor接受我们并将其标记为项目中的每个项目，但它永远不会呈现我们的首字母，因为它是一个模板：

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

因此，据我了解，*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”的含义是什么？

1 个答案: