<ion-navbar>에서 "* navbar"의 의미는 무엇입니까?

Question

내가이 튜토리얼을 따를 때마다 문구는 *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 항목의 각 항목에 대한 우리의 우표 그것을 밖으로 걸리지 만 템플릿이기 때문에 우리의 초기 렌더링 결코 다음 *navbar는 네비게이션 바의 구성 요소를 알려줍니다, 내가 이해, 그래서

<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> 

코드에 너무 많은 관심을 지불하지 마십시오 , 난 그냥 코드가 지금의 모습을 보여주고 싶었다 그런 다음 간단한 코드가 복잡한 블록으로 렌더링됩니다.

그래서, 방법은 나는 그것을을 당신은 당신이 (*navbar를 사용하여)을 navbar 템플릿을 사용하려는 이온에 말을, 어떤 내용 그들이해야 제목, 버튼에 대한 정보를 전송하는 것으로 이해 가지고 있고 그 물건들은 (end과 같은 속성으로) 놓여 야합니다. 그런 다음 Ionic은이 정보를 사용하여 템플릿을 채우고 HTML 코드를 렌더링합니다.