如何在angular2和ionic2中保留组件的DOM元素和模板字符串

Question

我使用ionic2和angular2构建应用程序，我想定义一个自定义组件，如ion-navbar，它可以在其中添加标题和按钮，就像：

 <t-nav> <t-title>title for custom nav</t-title> <t-buttons></t-buttons> </t-nav> 

使用自定义组件

 @Component({ selector: 't-nav', template: '<div>dummy</div><div>dummy</div>' }) export class TNav { } 

但是在离子构建之后，t-nav中的内容丢失了，只剩下了

 <t-nav> <div>dummy</div><div>dummy</div> </t-nav> 

那么任何人都可以告诉我，当模板不为空时，angular2框架如何在离子导航和离子按钮中保留DOM元素？

来自离子角度包的一些代码，nav.js，似乎模板不是空的

 Navbar.decorators = [ { type: Component, args: [{ selector: 'ion-navbar', template: '<div class="toolbar-background" [ngClass]="\\'toolbar-background-\\' + _mode"></div>' + '<button (click)="backButtonClick($event)" ion-button="bar-button" class="back-button" [ngClass]="\\'back-button-\\' + _mode" [hidden]="_hideBb">' + '<ion-icon class="back-button-icon" [ngClass]="\\'back-button-icon-\\' + _mode" [name]="_bbIcon"></ion-icon>' + '<span class="back-button-text" [ngClass]="\\'back-button-text-\\' + _mode">{{_backText}}</span>' + '</button>' + '<ng-content select="[menuToggle],ion-buttons[left]"></ng-content>' + '<ng-content select="ion-buttons[start]"></ng-content>' + '<ng-content select="ion-buttons[end],ion-buttons[right]"></ng-content>' + '<div class="toolbar-content" [ngClass]="\\'toolbar-content-\\' + _mode">' + '<ng-content></ng-content>' + '</div>', host: { '[hidden]': '_hidden', 'class': 'toolbar', '[class.statusbar-padding]': '_sbPadding' } },] }, ]; 

而且在html中我们可以嵌套元素

 <ion-navbar> <button ion-button icon-only menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title> Page Title </ion-title> <ion-buttons end> <button ion-button icon-only (click)="openModal()"> <ion-icon name="options"></ion-icon> </button> </ion-buttons> </ion-navbar> 

任何帮助将不胜感激。

Answer 1

@Component({
  selector: 't-nav',
  template: '<div>dummy</div><div>dummy</div>'
})
export class TNav {
}

这告诉Angular组件的模板只是<div>dummy</div><div>dummy</div> 。 如果你想transclude里面的html元素t-nav ，你需要添加<ng-content></ng-content>是这样的：

@Component({
  selector: 't-nav',
  template: `<!-- Dumy div -->
             <div>dummy</div>
             <!-- Content included beetween <t-nav>...</t-nav> -->
             <ng-content></ng-content>
             <!-- Another dummy div -->
             <div>dummy</div>`
})
export class TNav {
}

这将告诉Agular在ng-content所在的<t-nav>...</t-nav> （如t-title和t-buttons ）中放置任何HTML元素。

---

重要提示 ：就像你在SO SO答案中看到的那样，来自Ionic Team的Mark Hartington并不建议使用自定义组件作为导航栏，因为它可能会导致一些问题和错误。