代码之家 › 专栏 › 技术社区 › carl

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

ionic3 ionic2 typescript angular

4

carl · 技术社区 · 7 年前

<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>
<div>dummy</div><div>dummy</div>
</t-nav>

一些来自离子角度软件包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'
                }
            },] },
];

<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 回复 | 直到 7 年前

1

3

sebaferreras 7 年前

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

这告诉Angular 样板组件的 <div>dummy</div><div>dummy</div> 中的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将HTML元素放在 <t-nav>...</t-nav> (如 t-title 和 t-buttons )其中 ng-content 是

重要 :就像你在 this SO answer