Angular 2 模板组件答案

【问题标题】：Angular 2 Template ComponentAngular 2 模板组件
【发布时间】：2016-04-29 07:17:33
【问题描述】：

您好，我想创建一个自定义对话框组件，并且我想以声明方式插入它的内容，应该如下所示：

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>

这不起作用，我该怎么做？有可能吗？

【问题讨论】：

标签： angular components

【解决方案1】：

我认为要使<content> 正常工作，您需要从默认的ViewEncapsulation.Emulated 切换到ViewEncapsulation.Native（并在本机不支持它的浏览器上添加web-components polyfills）或使用<ng-content> 来代替它在所有视图封装模式中。

【讨论】：

我接受 Thierry 的回答，因为他提供了代码示例。无论如何感谢您的帮助兄弟：D

【解决方案2】：

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

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

并像这样使用组件：

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

希望对你有帮助，蒂埃里

【讨论】：