使用 AngularJS 的簡單彈出視窗
- 在 Angular 中安裝依賴項
-
在 Angular 中使用
npm install bootstrap jquery popper.js安裝 Bootstrap - 在我們的 Angular 專案中安裝 Angular Material
- 在 Angular 中建立彈出視窗時可能遇到的錯誤
在網頁上啟用彈出視窗的好處是顯示有關專案的簡簡訊息的絕佳途徑。
彈出視窗也是提示操作的理想方式，這樣當使用者單擊專案時，它會彈出一個彈出視窗以指示操作已註冊。
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。
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn