角2模板组件

Question

你好，我想创建一个自定义对话框分量，我想它插入内容上声明的方式，应该是这样的：

app.action.dialog.component.ts：

@Component({ 
    selector: 'app-action-dialog', 
    templateUrl: 'app/template/app.action.dialog.component.html' 
}) 
export class ActionDialog { 

    showing: boolean; 

    constructor() { 
     this.showing = false; 
    } 

    show() { 
     this.showing = true; 
    } 

    hide() { 
     this.showing = false; 
    } 
} 

app.action.dialog.component.html：

<div id="overlay" class="valign-wrapper" 
    *ngIf="showing" (click)="hide()"> 
    <div class="container valign"> 
     <div class="card"> 
      <div class="card-content"> 
       <content select="[content]"></content> 
      </div> 
     </div> 
    </div> 
</div> 

使用例如：

<app.action.dialog> 
    <div content> example </div> 
</app.action.dialog> 

这不行，我该怎么办？可能吗？

Answer 1

我正确地理解你的问题（提供一些内容到另一个组件），我认为你可以利用ng-content：

@Component({ 
    selector: 'field', 
    template: ` 
    <div> 
     <ng-content></ng-content> 
    </div> 
    ` 
}) 
export class FormFieldComponent { 
    (...) 
} 

，并使用类似的组件：

<field> 
    <input [(ngModel)]="company.address.street"/> 
</field> 

希望它hepls你， Thierry

Answer 2

我认为<content>工作，你需要从默认ViewEncapsulation.Emulated切换到ViewEncapsulation.Native（和不支持它本身的浏览器添加Web组件polyfills），或使用<ng-content>，而不是在所有视图封装形式，其中工程。