<ion-navbar>の "* navbar"の意味は？

Question

イオンのチュートリアルに従うたびに、私はフレーズ*navbarを見ます。 これは何の意味ですか？私はアスタリスクがあることを示し、あなたが言う（とちょうどあなたがhereを読むことができるように）同じように

<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

.. *それは、テンプレート内のタグを挿入している意味が、本当にこの表現のために理解することができないことを

を知っていますこの指示文はこのコンポーネントをテンプレートとして扱い、のように描画しません。例えば、ngFor項目の各項目について、当社及び切手、それを取り出して、それはテンプレートなので、それは私たちの最初のをレンダリングすることはありません：

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

だから、私は理解して、*navbarは、ナビゲーションバーのコンポーネントイオンを伝えます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> 

コードにあまり注意を払っていない、私はちょうどあなたのようにどのように見えるか、あなたのコードを見せたかったですシンプルは、そのような複雑なコードブロックとしてレンダリングされます。だから、

、私はそれを理解方法は、あなたがちょうどあなたが（*navbarを使用して）navbarテンプレートを使用することをイオンに言って、タイトルについての情報を送信し、ボタンとどのようなコンテンツを、彼らが必要されていることです（endのような属性で）これらのものを配置する必要があります。次に、Ionicはその情報を使用してテンプレートを記入し、HTMLコードをレンダリングします。