要在Angular Material Dialog中使用内容投影,您可以按照以下步骤进行操作:
import { Component, OnInit, ContentChild, TemplateRef } from '@angular/core';
@Component({
selector: 'app-dialog-content',
template: `
`
})
export class DialogContentComponent implements OnInit {
@ContentChild(TemplateRef) content: TemplateRef;
constructor() { }
ngOnInit() {
}
}
元素将内容投影到对应的位置。
This is the projected content
在对话框组件的模板中,使用
组件包装要投影的内容,并将其放置在
中。
最后,在您的对话框组件中使用
组件的content
模板引用。
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-dialog-example',
templateUrl: './dialog-example.component.html',
styleUrls: ['./dialog-example.component.css']
})
export class DialogExampleComponent implements OnInit {
constructor(
public dialogRef: MatDialogRef,
@Inject(MAT_DIALOG_DATA) public data: any
) { }
ngOnInit() {
}
}
这样,您就可以在Angular Material Dialog中使用内容投影了。注意,您可以将任何内容投影到对话框中,包括表单、按钮、文本等等。
上一篇:Angular Material Design与ionic 3:主题颜色不起作用。
下一篇:Angular Material dialogRef.afterClosed().subscribe未处理错误。