gpt4 book ai didi

Angular 2 模板组件

转载 作者:太空狗 更新时间:2023-10-29 17:44:04 25 4
gpt4 key购买 nike

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

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>

希望对你有帮助,蒂埃里

关于Angular 2 模板组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34950950/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com