Estoy tratando de crear un cuadro de diálogo como se muestra en la página Diseños de materiales aquí . Puedo hacer que aparezca el botón, hacer clic en él, aparece el cuadro de diálogo y la página se oscurece como se esperaba, pero no aparece ningún texto. Siento que estoy cerca, pero no puedo entender dónde me estoy equivocando. Cualquier ayuda es apreciada, gracias!
Aquí está mi código:
import { Component, OnInit } from '@angular/core'; import {MdDialog} from '@angular/material'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { constructor(public dialog: MdDialog) { } openDialog() { this.dialog.open(DialogOverviewExampleDialog); } ngOnInit() { } } @Component({ selector: 'dialog-overview-example-dialog', templateUrl: './dialog-overview-example-dialog.html', }) export class DialogOverviewExampleDialog {}Parece que te puedes estar perdiendo algunas cosas en tu intento.
Primero en su código, asegúrese de incluir MdDialogRef en su constructor de clase DialogOverviewExampleDialog , así, según la documentación :
import {Component} from '@angular/core'; import {MdDialog, MdDialogRef} from '@angular/material'; // Added "MdDialogRef" @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent { constructor(public dialog: MdDialog) {} openDialog() { let dialogRef = this.dialog.open(DialogOverviewExampleDialog); // If you need a result from your dialog dialogRef.afterClosed().subscribe(result => { // Do something with result, if needed. }); } } @Component({ selector: 'dialog-overview-example-dialog', templateUrl: './dialog-overview-example-dialog.html', }) export class DialogOverviewExampleDialog { // Added Constructor constructor(public dialogRef: MdDialogRef<DialogOverviewExampleDialog>) {} }En segundo lugar, por el error:
No se encontró ninguna fábrica de componentes para DialogOverviewExampleDialog. ¿Lo agregó a @NgModule.entryComponents?
Su app.module.ts debe definir su componente de diálogo ( DialogOverviewExampleDialog ) en dos lugares : declarations y entryComponents .
Por ejemplo:
@NgModule({ declarations: [ HomeComponent, DialogOverviewExampleDialog // HERE ], entryComponents: [ DialogOverviewExampleDialog // AND HERE ], ...