Angular 6 - 从另一个组件调用模态窗口组件

Posted 2023-02-23

【中文标题】Angular 6 - 从另一个组件调用模态窗口组件

【英文标题】：Angular 6 - Call modal-window component from another component

【发布时间】：2018-11-30 22:37:26

【问题描述】：

我有两个组件： 登录，消息框

当 LoginComponent 的授权不正确时，我想调用 messageBox(whitch 代表模式窗口)，但是得到了这个 error。 看起来我没有注册组件。但是当 app.component.ts 中的一个注册组件时，我得到了这个error。问题的根源是什么。我真的被困在这里了。

登录组件

        import  Component, OnInit, ViewChild, Directive  from '@angular/core';
        import  FormBuilder, FormGroup, Validators  from '@angular/forms';

        import  FuseConfigService  from '@fuse/services/config.service';
        import  fuseAnimations  from '@fuse/animations';

        import  DataService  from '../../../data.service';
        import  Observable  from 'rxjs';
        import  Router  from '@angular/router';
        import  MessageBox, MessageBoxDialog  from '../messageBox/messageBox.component'

        @Component(
          selector: 'fuse-login-2',
          templateUrl: './login-2.component.html',
          styleUrls: ['./login-2.component.scss'],
          animations: fuseAnimations,
          providers: [MessageBox]
        )

        export class FuseLogin2Component implements OnInit 
          //@ViewChild(MessageBox)

          loginForm: FormGroup;
          loginFormErrors: any;
          email: string;
          password: string;
          appAccess: Object;

          constructor(
            private fuseConfig: FuseConfigService,
            private formBuilder: FormBuilder,
            private data: DataService,
            private router: Router,
            private messageBox: MessageBox
          ) 
            this.fuseConfig.setConfig(
              layout: 
                navigation: 'none',
                toolbar: 'none',
                footer: 'none'
              
            );

            this.loginFormErrors = 
              email: ,
              password: 
            ;
          

      ngOnInit() 
        this.loginForm = this.formBuilder.group(
          email: ['', [Validators.required, Validators.email]],
          password: ['', Validators.required]
        );

        this.loginForm.valueChanges.subscribe(() => 
          this.onLoginFormValuesChanged();
        );
      

// HERE BEGIN MY PROBLEM
      AuthentificateUser() 
        this.data.authentificateUser(this.email, this.password).subscribe(data => this.appAccess = data);
        console.log(this.data);

          if (this.appAccess == true) 
            this.router.navigate(['sample']);
          
          else if (this.appAccess == false) 
            this.messageBox.openDialog(); // I can see method from another component
          
      

消息框组件

import Component, Inject from '@angular/core';
import MatDialog, MatDialogRef, MAT_DIALOG_DATA from '@angular/material';

/**
 * @title Dialog Overview
 */
@Component(
  selector: 'messageBox',
  templateUrl: 'messageBox.component.html',
  styleUrls: ['messageBox.component.scss'],
)
export class MessageBox 

  animal: string;
  name: string;

  constructor(public dialog: MatDialog) 

  public openDialog(): void 
    let dialogRef = this.dialog.open(MessageBoxDialog, 
      width: '250px',
      data:  name: this.name, animal: this.animal 
    );

    dialogRef.afterClosed().subscribe(result => 
      console.log('The dialog was closed');
      this.animal = result;
    );
  


@Component(
  selector: 'messageBox.component-dialog',
  templateUrl: 'messageBox.component.html',
)
export class MessageBoxDialog 

  constructor(
    public dialogRef: MatDialogRef<MessageBoxDialog>,
    @Inject(MAT_DIALOG_DATA) public data: any)  

  onNoClick(): void 
    this.dialogRef.close();
  

应用组件

import  Component  from '@angular/core';
import  TranslateService  from '@ngx-translate/core';

import  FuseSplashScreenService  from '@fuse/services/splash-screen.service';
import  FuseTranslationLoaderService  from '@fuse/services/translation-loader.service';
import  FuseNavigationService  from '@fuse/components/navigation/navigation.service';

import  locale as navigationEnglish  from './navigation/i18n/en';
import  locale as navigationTurkish  from './navigation/i18n/tr';

import  MessageBox, MessageBoxDialog  from './main/content/messageBox/messageBox.component';

@Component(
  selector: 'fuse-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
)
export class AppComponent 
  constructor(
    private translate: TranslateService,
    private fuseNavigationService: FuseNavigationService,
    private fuseSplashScreen: FuseSplashScreenService,
    private fuseTranslationLoader: FuseTranslationLoaderService,
    private messageBox: MessageBox
  ) 
    // Add languages
    this.translate.addLangs(['en', 'tr']);

    // Set the default language
    this.translate.setDefaultLang('en');

    // Set the navigation translations
    this.fuseTranslationLoader.loadTranslations(navigationEnglish, navigationTurkish);

    // Use a language
    this.translate.use('en');
  

【问题讨论】：

你能分享你的appComponent.ts

导入 MatDialogModule

导入 MatDialogModule 并不能解决我的问题

【参考方案1】：

MessageBox 是一个组件，不能注入组件。您应该将其重构为 service。

更简单的解决方案是在登录组件中调用this.dialog.open(MessageBoxDialog); 而不是this.messageBox.openDialog();。

您可以阅读更多关于服务和组件之间的区别here。

工作代码

看到这个StackBlitz。

【讨论】：

我可以做一个服务，但是我有一个文件夹messageBox和里面的html、scss、ts我如何使用这个包含这些文件的服务？

MessageBoxService 只负责管理 modals。在这种情况下，它将显示 MessageBoxDialog 组件 - 其中包含所需的模板和样式。

如何为这个模态添加更多的 CSS 样式，而不仅仅是宽度？ @JasonK