Java 使用<；a>；标记以打开HTML和XML格式的弹出窗口

登录后，我将以下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>

许可证生成器


添加产品
显示细节
显示其他详细信息



钥匙是必需的
CustomerID是必需的
{{product.viewValue}}
产品是必需的
{{version.viewValue}}
版本是必需的
需要用户会话
需要服务连接
MSAN是必需的
需要CPE
有效期是必需的


生成
重置

现在，此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错误消息：比如在resources and vendors文件夹中找不到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 但是屏幕是空白的。

有了一个元素，你可以进行下一步

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

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

OpenModel（事件）{
event.preventDefault（）；
////你关于开放模式的逻辑
}

如果你真的需要开放模式的元素