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

Posted 2023-03-13

【中文标题】如何在angular2和ionic2中同时保留组件的DOM元素和模板字符串

【英文标题】：How to keep both DOM elements and template string of a component in angular2 & ionic2

【发布时间】：2018-03-02 06:32:42

【问题描述】：

我使用 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 

但是在 ionic build 之后，t-nav 中的内容不见了，只剩下了

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

那么谁能告诉我 angular2 框架如何在模板不为空的情况下将 DOM 元素保留在 ion-nav 和 ion-buttons 中？

ionic-angular包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>

任何帮助将不胜感激。

【参考方案1】：

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

这告诉 Angular 组件的 模板 就是 <div>dummy</div><div>dummy</div>。如果你想transcludet-nav里面的html元素，你需要像这样添加<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 将任何 HTML 元素放在 <t-nav>...</t-nav> 中（如 t-title 和 t-buttons），ng-content 所在的位置。

---

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

【讨论】：

非常感谢，它有效！出于某种原因，我们的团队需要自定义离子导航栏的外观，也许我们可以找到另一种方法来实现这一点。

很高兴听到这个消息 :) 是的，您可以试一试，如果您发现任何问题，请告诉我们，以便我们看看如何解决这个问题...