使用<a>標簽在 HTML 和 Angular 中打開一個彈出窗口</a>

Question

登錄后，我將以下 HTML 文件作為第一頁：

<mat-toolbar color="primary">
    <span class="align-center">License Generator</span>
</mat-toolbar>
<br>
<mat-card>
    <table class="generate-full-width" >
        <tr>
            <td width="100%" colspan="2">
                <button mat-raised-button color="primary" type="button" style='margin-right:16px' (click)="openAddProductDialog()">Add Product</button>
            </td>
            <td width="100%" colspan="2">
                <button mat-raised-button color="primary" type="button" style='margin-right:16px' (click)="openDetailsDialog()">Show Details</button>
            </td>
            <td width="75%" colspan="2">
                <button mat-raised-button color="primary" type="button" (click)="openOtherDetailsDialog()">Show Other Details</button>
            </td>
        </tr>
    </table>
    <br> <br>
    <mat-card-content>

        <form [formGroup]="form" (submit)="onSubmit()" autocomplete="off" novalidate>
            
            <table class="generate-full-width">
                <tr>
                    <td colspan="2" width="100%">
                        <mat-form-field class="generate-full-width">
                            <input matInput placeholder="Key" formControlName="Key" name="Key">
                            <mat-error *ngIf="submitted && hasError('hardwareKey', 'required')">Key is required</mat-error>
                        </mat-form-field>
                    </td>
                    <td colspan="2" width="100%">
                        <mat-form-field class="generate-full-width">
                            <input matInput placeholder="CustomerID" formControlName="customerID" name="customerID">
                            <mat-error *ngIf="submitted && hasError('customerID', 'required')">CustomerID is required</mat-error>
                        </mat-form-field>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" width="100%">
                        <mat-form-field class="generate-full-width">
                            <mat-select placeholder="Product" formControlName="product" name="product" (selectionChange)="getDefaultValues()">
                                <mat-option *ngFor="let product of products" [value]="product.value">
                                    {{product.viewValue}}
                                </mat-option>
                            </mat-select>
                            <mat-error *ngIf="submitted && hasError('product', 'required')">Product is required</mat-error>


                        </mat-form-field>
                    </td>

                    <td colspan="2" width="100%">
                        <mat-form-field class="generate-full-width">
                            <mat-select placeholder="Version" formControlName="Version" name="Version">
                                <mat-option *ngFor="let version of Versions" [value]="version.value">
                                    {{version.viewValue}}
                                </mat-option>
                            </mat-select>
                            <mat-error *ngIf="submitted && hasError('Version', 'required')">Version is required</mat-error>
                        </mat-form-field>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" width="100%">
                        <mat-form-field class="generate-full-width">
                            <input type="text" matInput placeholder="Max User Sessions" formControlName="userSessions" name="userSessions" pattern="[0-9]*"
                                numbersOnly>
                            <mat-error *ngIf="submitted && hasError('userSessions', 'required')">User Sessions is required</mat-error>
                        </mat-form-field>
                    </td>

                    <td colspan="2" width="100%">
                        <mat-form-field class="generate-full-width">
                            <input matInput placeholder="Max Service Connections" formControlName="serviceConnections" name="serviceConnections" numbersOnly>
                            <mat-error *ngIf="submitted && hasError('serviceConnections', 'required')">Service Connections is required</mat-error>
                        </mat-form-field>
                    </td>
                </tr>

                <tr>
                    <td colspan="2" width="100%">
                        <mat-form-field class="generate-full-width">
                            <input matInput placeholder="Max MSANs" formControlName="msan" name="msan" numbersOnly>
                            <mat-error *ngIf="submitted && hasError('msan', 'required')">MSAN is required</mat-error>
                        </mat-form-field>
                    </td>

                    <td colspan="2" width="100%">
                        <mat-form-field class="generate-full-width">
                            <input matInput placeholder="Max CPE" formControlName="cpe" name="cpe" numbersOnly>
                            <mat-error *ngIf="submitted && hasError('cpe', 'required')">CPE is required</mat-error>
                        </mat-form-field>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" width="100%">
                        <mat-form-field class="generate-full-width">
                            <input matInput [min]="minDate" [matDatepicker]="picker" placeholder="Expiry Date" formControlName="expiryDate" (click)="picker.open()"
                                readonly>
                            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                            <mat-datepicker touchUi="true" #picker></mat-datepicker>
                            <mat-error *ngIf="submitted && hasError('msan', 'required')">Expiry Date is required</mat-error>
                        </mat-form-field>
                    </td>
                </tr>
                <br>
                <tr>
                    <td colspan="2">
                        <button mat-raised-button color="primary">GENERATE</button>
                    </td>
                    <td>
                        <button mat-raised-button color="warn" style='margin-left:130px' type="reset" >RESET</button>
                    </td>
                    <!-- <td>
                        <button mat-raised-button color="primary" type="button" (click)="openDialog()">ADD PRODUCT</button>
                    </td> -->
                </tr>
            </table>
            <br>
            <mat-form-field class="generate-full-width">
                <input matInput [readonly]="!editable" placeholder="License Key" style="font-weight: bold;" value={{licenseKey}}>
            </mat-form-field>
        </form>
    </mat-card-content>
</mat-card>

現在這個 HTML 文件更改為：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
        <link rel="stylesheet" type="text/css" href="generatelicense.component.css">
        <link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
        <link rel="stylesheet" type="text/css" href="vendors/css/ionicons.min.css">
        <link rel="stylesheet" type="text/css" href="vendors/css/animate.css">
        <link rel="stylesheet" type="text/css" href="resources/css/style.css"> 
        <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
        <title>License Generator</title>
    </head>
    <body>
        <header>
            <nav>
                <div class="row">
                    <img src="resources/img/download-removebg-preview.png" alt="logo" class="logo">
                    <img src="resources/img/download.png" alt="logo" class="logo-black">
                    <ul class="main-nav js--main-nav">
                        <td><li><a href="add-product-dialog.html">Add Product</a></li></td>
                        
                        <li><a href="customer-list-dialog.html">Show Details</a></li>
                        <li><a href="details-list-dialog.html">Show Other Details</a></li>
                    </ul>
                    <a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>
                </div>
            </nav>
            <div class="hero-text-box">
                <h1>Welcome to<br>License Generator.</h1>
                <a class="btn btn-full" href="#">Generate License</a>
                <a class="btn btn-ghost" href="#">Generate Other License</a>
            </div>  
        </header>
    </body>    
</html>

我試圖有一種方法來打開一個彈出窗口而不是導航到一個新的 URL，但我找不到任何東西。 我所擁有的最好的方法是為彈出窗口添加這些相應的 HTML 文件。 請幫忙。

同樣在登錄頁面，我收到了 css 錯誤消息：例如在資源和供應商文件夾中找不到 CSS 文件的文件。 現有的登錄頁面是：

<mat-toolbar color="primary">
    <span class="align-center">License Generator</span>
</mat-toolbar>


<mat-toolbar class = "login-toolbar">
<mat-card class="login-card">
    <mat-card-header>
        <mat-card-title>
            Login
        </mat-card-title>
    </mat-card-header>
    <mat-card-content>
        <form class="login-form">
            <table cellspacing="0">
                <tr>
                    <td>
                        <mat-form-field >
                            <input matInput placeholder="Username" [(ngModel)] = "username" name = "username" required>
                        </mat-form-field>
                    </td>
                </tr>

                <tr>
                    <td>
                        <mat-form-field>
                            <input matInput placeholder="Password" [(ngModel)] = "password" type="password" name = "password"  required>
                        </mat-form-field>
                    </td>
                </tr>
            </table>
        </form>
        <mat-spinner [style.display]="showSpinner ? 'block' : 'none'">
            
        </mat-spinner>
        <mat-card-actions>
            <button mat-raised-button (click)= "login()" color="primary">Login</button>
        </mat-card-actions>
    </mat-card-content>
</mat-card>
</mat-toolbar>

我希望登錄后的背景顯示和其他所有內容與下一頁相同，但無法在登錄頁面上獲取表單。 如果我復制現有代碼，它會編譯並顯示在 http://localhost:4200 可用，但屏幕是空白的。

Answer 1

有了一個元素，你可以做下一個

<a href="#" (click)="openModal($event)">Show Details</a>

openModal(event) {
event.preventDefault();
//// your logic about open modal
}

如果你真的需要作為開放模式的元素