迹忆客 专注技术分享

在网页上启用弹出窗口的好处是显示有关项目的简短信息的绝佳途径。

弹出窗口也是提示操作的理想方式，这样当用户单击项目时，它会弹出一个弹出窗口以指示操作已注册。

Angular 是一个有多种用途的框架，我们必须安装一些依赖项才能让弹出模式工作。

在 Angular 中安装依赖项

使用 Visual Studio Code 处理 Angular 项目是理想的，因为它创建了一个可以在一个地方完成所有事情的环境。

在 Angular 中使用 npm install bootstrap jquery popper.js 安装 Bootstrap

创建一个新的 Angular 项目后，我们前往终端并使用 npm install bootstrap jquery popper.js 安装 Bootstrap。

安装成功后，我们在 VS Code 上打开项目文件夹，前往 angular.json，在 architect > build key 下，我们添加以下内容：

"styles": [
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

在我们的 Angular 项目中安装 Angular Material

接下来是在我们的项目中安装 Angular Material。Angular 材质可以添加一个新的皮肤/主题来美化我们的网页。

尽管如此，在终端的项目文件夹中，我们运行以下命令 ng add @angular/material 来安装 Angular 材质。

我们将获得可供选择的皮肤列表。选择后，我们只是为其他选项选择了是。

现在依赖项已经成功安装，我们现在将继续进行正确的编码。

除了创建项目时创建的组件外，我们还需要制作其他组件。

我们将通过转到终端，在项目文件夹中，然后在终端中输入 ng g component popup 来做到这一点。安装后，我们应该会看到安装了其他组件。

继续前进，我们进入 app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDialogModule } from '@angular/material/dialog';
import { PopUpComponent } from './pop-up/pop-up.component';

@NgModule({
  declarations: [
    AppComponent,
    PopUpComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatDialogModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

请注意，我们在上面做了一些额外的导入，导入了 BrowserAnimationsModule、MatDialogModule 和 PopUpComponent，并将 BrowserAnimationsModule、MatDialogModule 添加到导入数组中。

接下来我们在 popup.component.html 上工作，我们做一些输入：

<h2> Welcome {{firstName}} </h2>

<button class="btn btn-primary">
    Press
</button>

我们现在移动到 app.component.ts，在这里我们导入 MatDialog 和 PopUpComponent。在这里，我们还输入了决定单击按钮时显示哪些数据的代码。

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { PopUpComponent } from './pop-up/pop-up.component';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-mateiral';

  constructor(private dialogRef : MatDialog){}

  openDialog(){
    this.dialogRef.open(PopUpComponent,{
      data : {
        name : 'Samuel'
      }
    });
  }
}

app.component.html 还添加了一些小代码；我们设计了单击时弹出消息的按钮。

<button class="btn btn-primary" (click)="openDialog()">
  Click to open pop up
</button>

然后我们转到 pop-up.component.ts 并进行一些编码。这里发生的是，我们首先将 Inject 和 MAT_DIALOG_DATA 导入到我们的组件中，然后我们使用这些导入一起为弹出消息添加一个名称。

import { Component, Inject, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-pop-up',
  templateUrl: './pop-up.component.html',
  styleUrls: ['./pop-up.component.css']
})
export class PopUpComponent implements OnInit {

  firstName;
  constructor(@Inject(MAT_DIALOG_DATA) public data) {
    this.firstName = data.name
  }

  ngOnInit(): void {
  }
}

大功告成，运行项目，编译成功。

在 Angular 中创建弹出窗口时可能遇到的错误

以防万一你遇到此错误，在尝试运行项目时，不能将类型为 any[] 的参数分配给类型参数。

我们需要做的就是进入 tsconfig.json，添加这个片段*noImplicitAny*: true 并将 strict: true 更改为 strict: false。