Angular 2模板组件

发布时间：2020-12-17 07:50:07 所属栏目：安全来源：网络整理

导读：您好我想创建一个自定义对话框组件,我想以声明方式插入它内容,应该如下所示： app.action.dialog.component.ts： @Component({ selector: 'app-action-dialog',templateUrl: 'app/template/app.action.dialog.component.html' })export class ActionDialog {

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

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>

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

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

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

并使用这样的组件：

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

希望它能解读你,蒂埃里

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!