Angular 2 模板组件 [英] Angular 2 Template Component

问题描述

你好，我想创建一个自定义对话框组件，我想以声明的方式插入它的内容，应该是这样的:

app.action.dialog.component.ts:

@Component({选择器:'app-action-dialog',模板网址:'app/template/app.action.dialog.component.html'})导出类 ActionDialog {显示:布尔值；构造函数(){this.showing = false;}展示() {this.showing = true;}隐藏() {this.showing = false;}}

app.action.dialog.component.html:

用法示例:

<app.action.dialog><div 内容>示例 </div></app.action.dialog>

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

解决方案

我正确理解了你的问题(向另一个组件提供一些内容)，我认为你可以利用 ng-content:

@Component({选择器:'字段'，模板:`
<ng-content></ng-content></div>`})导出类 FormFieldComponent {(...)}

并像这样使用组件:

<字段><输入[(ngModel)]="company.address.street"/></字段>

希望对你有帮助，蒂埃里

Hello I want to create a custom dialog component and I want to insert it content on a declarative way, should look like this:

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>

usage example:

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

This ain't working, how can I do this? Is it possible?

解决方案

I correctly understand your question (provide some content to another component), I think that you could leverage ng-content:

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

and use the component like that:

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

Hope it hepls you, Thierry

这篇关于Angular 2 模板组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！