时间戳

首页 > 解决方案 > 当用户使用材质对话框注册时以角度重新加载特定组件

angular - 当用户使用材质对话框注册时以角度重新加载特定组件

问题描述

我正在尝试将注册用户加载到 . 用户注册后，应将注册用户填充到 .为此，我编写了如下代码。

下面的代码在 projects.component.html

<a href="javascript:;" (click)="openDialog()">Register</a>

下面的代码在 projects.component.ts

openDialog(): void {
    const dialogRef = this.dialog.open(RegisterComponent, {
      width:'50%',
        height:'85%'
    });
  }

当我单击注册时，它会打开一个包含以下字段的对话框。下面的代码是 register.component.html

<form role="form" #heroForm="ngForm">

            <!-- Registration Form on Modal Dialog Box Start -->

            <!-- Name Start -->
            <div class="form-group row">
              <label for="name" class="col-md-0 control-label"></label>
              <div class="col-md-5">
                  <mat-input-container class="full-width">
                      <input required [(ngModel)]="entry.name" name="name" id="name"
                             matInput placeholder="Name">
                  </mat-input-container>
              </div>
          </div>
          <!-- Name End -->

          <!-- Conditional Select Field for Different Account Types. Eg. Git, Bitbucket, GitLab, Github -->
          <div class="form-group row">
            <label class="col-md-0 control-label">
            </label>
            <div class="col-md-5">
                <mat-form-field>
                    <mat-select placeholder="Account Type" required [(ngModel)]="entry.accountType"
                                name="type">
                        <mat-option *ngFor="let type of accountTypes" [value]="type">
                            {{type}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>
        </div>
        <!-- Conditional Select Field for Different Account Types. Eg. Git, Bitbucket, GitLab, Github End -->             

              <!-- Git  Start    -->
              <div class="form-group row" *ngIf="entry.accountType === 'Git'">
                <label for="gitAccessKey" class="col-md-0 control-label">
                </label>
                <div  class="col-md-5">
                    <mat-input-container class="full-width" *ngIf="entry.accountType != 'Slack'" >
                        <input required [(ngModel)]="entry.accessKey" name="accessKey" id="gitAccessKey"
                               matInput type="text" placeholder="Access-Key">
                    </mat-input-container>
                </div>
                </div>
            </div>

            <div class="form-group row" *ngIf="entry.accountType === 'Git'">
                <label for="gitSecret" class="col-md-0 control-label">
                </label>
                <div class="col-md-5">
                    <mat-input-container class="full-width" >
                        <input required [(ngModel)]="entry.secretKey" name="secret" id="gitSecret"
                               matInput type="password" placeholder="Secret-Key">
                    </mat-input-container>
                </div>
            </div>
            <!-- Git  End    -->
 </form>

以下代码用于 register.component.ts

import {Component, OnInit, Inject} from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
import {Routes, RouterModule, Router, ActivatedRoute}from "@angular/router";
import {AccountService}from '../../../services/account.service';
import {OrgService}from '../../../services/org.service';
import {SnackbarService}from '../../../services/snackbar.service';
import {Account} from '../../../models/account.model';
import {Handler}from '../../dialogs/handler/handler';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss'],
  providers: [AccountService, OrgService, SnackbarService]
})
export class RegisterComponent implements OnInit{
  entry: Account = new Account();
  accountTypes = ['Git', 'GitHub', 'BitBucket', 'GitLab'];
  constructor(private accountService: AccountService, 
    private orgService: OrgService,
    private handler: Handler, 
    private snackbarService: SnackbarService,
    private route: ActivatedRoute, 
    private router: Router,
    public dialogRef: MatDialogRef<RegisterComponent>,
    private dialog: MatDialog) {}

  ngOnInit() {
  }

  create() {
    this.handler.activateLoader();
    this.snackbarService.openSnackBar(this.entry.name + " registering...", "");
    this.accountService.create(this.entry).subscribe(results => {
      this.handler.hideLoader();
      if (this.handler.handle(results)) {
        return;
      }
    this.snackbarService.openSnackBar(this.entry.name + " registered successfully", "");
    this.entry = results['data'];
    console.log(this.entry);
    this.onClose();
    //this.refresh();
    this.router.navigate(['/app/projects/new']);    
    }, error => {
      this.handler.hideLoader();
      this.handler.error(error);
    });
  }

  onClose(){
    this.dialogRef.close();
  }

  refresh() {
    location.reload()
  }
}

请参阅下图以获得更好的清晰度。所以我的工作流程是这样的，当用户在对话框上注册自己时，注册的用户名应该使用 angular 填充到下拉列表中。我已经使用了 window.location.reload(); 但它的问题是它完全重新加载了整个页面。这是一个糟糕的用户体验。因此，如果不重新加载整个页面，是否还有其他可能性可以让用户走在同一条路线上，而不会分散他对当前页面的注意力？请问有什么建议吗？意味着我只想重新加载那个特定的视图。

在此处输入图像描述 在此处输入图像描述

标签： angularangular5angular2-routingangular-material2

解决方案

这是 SPA 和 AJAX 应用程序的全部要点，您不必每次都重新加载页面。在这种情况下也是如此。

您可以将所有用户存储在一个集合中。然后，当您从服务器确认用户已正确登录时，您可以引发将该帐户推送到列表的事件。然后，如果您列表中的所有项目都绑定到此集合，则视图将自动更新。

这是一个例子：

select.component.html

<mat-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="item">
  <mat-option *ngFor="let item of foods" [value]="item.value">
    {{item.viewValue}}
  </mat-option>
</mat-select>

<button mat-raised-button (click)="addItem()">Add item</button>

选择.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-select',
  templateUrl: './select.component.html',
  styleUrls: ['./select.component.css']
})


export class SelectComponent implements OnInit {

  foods: Food[] = [
    { value: 'food-0', viewValue: 'Pizza' },
    { value: 'food-1', viewValue: 'Steak' },
    { value: 'food-2', viewValue: 'Fries' },
  ];
  constructor() { }

  ngOnInit() {
  }

  addItem() {
    this.foods.push({value: 'food', viewValue: 'Hamburgers'});
    console.log(`Items count ${this.foods.length}`);
  }

}

export interface Food {
  value: string;
  viewValue: string;
}

推荐阅读