标签: angular7

我使用的 Angular Popup 组件如下（在线示例）：

<popup>
  <anchor>
    Menu        
  </anchor>
  <window>
    <ul>
      <li>Item 1</li>           
      <li>Item 2</li>
    </ul>
  </window>
</popup>

组件模板是：

<a class="anchor" (click)="toggle()">
  <ng-content select="anchor"></ng-content>
</a>
<div class="window" [hidden]="!active">
  <ng-content select="window"></ng-content>
</div>

我收到以下错误：

Template parse errors: 'anchor' is not a known element:    
1. If 'anchor' is an Angular component, then verify that it is part of this module.    
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. 

弹出模块已经有 NO_ERRORS_SCHEMA：

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; …

在 Angular 应用程序中，我试图breadcrumb通过删除分隔线来覆盖我的风格。我用https://getbootstrap.com/docs/4.2/components/breadcrumb/#example。但它不起作用。

这是我的 angular.json 文件脚本

    {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ibo": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ibo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "stylePreprocessorOptions": {
                "includePaths": [
                  "node_modules/bootstrap",
                  "src/styles"
                ]
             },
            "scripts": [
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ],
            "styles": [
               "node_modules/font-awesome/css/font-awesome.min.css",
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/styles/styles.scss",
            ], …

<router-outlet></router-outlet>我正在尝试在 Angular Material 弹出对话框中使用。但是，路由器出口部分不会呈现任何内容，也不会将任何内容记录到控制台。

如果我将 添加<router-outlet></router-outlet>到弹出对话框的组件（ContextBuyerPinComponent）的 HTML 内容中，那么它就可以正常工作。

路线如下：

const demoRoutes: Routes = [
  {
    path: 'demo',
    children: [
      { path: 'register-email', component: RegisterEmailComponent },
      {
        path: 'context-buyer-pin',
        component: ContextBuyerPinComponent,
        children: [
          { path: 'services', component: ContextPinServicesComponent },
          { path: 'emails', component: ContextPinEmailsComponent },
          { path: 'details', component: ContextPinDetailsComponent }
        ]
      }
    ]
  }
];

该对话框是通过 ContextBuyerPinComponent 打开的，如下所示 this.matDialog.open(ContextBuyerPinDialogComponent, this.config);：

ContextBuyerPinDialogComponent HTML 如下：

const demoRoutes: Routes = [
  {
    path: 'demo',
    children: [
      { path: 'register-email', …

我想从发布请求中获取 StatusCode 值，以便在我的组件中使用它。这就是我所做的：
Api 调用：

  Login(user: User) {
    return this.http.post(apiUrl + 'account/Login', user).subscribe();
  }

组件中的方法：

  Login() {
    this.user.UserName = this.loginForm.controls.userName.value;
    this.user.Password = this.loginForm.controls.password.value;

    this.api.Login(this.user)
  }

现在仅显示为错误 结果应该是这样的：

更新
这不是cors问题...
成功登录：

如何检查用户是否已向下滚动（或交叉）到浏览器中的特定元素（基于 id），以便我可以检查条件并在 Angular 7 中动态分配类名？

我的角度组件中有 Map 作为类 Group 的对象，值是类 Match 的数组，它基本上表示组和将在该组的组成员之间发生的匹配。。

地图<组，匹配[]>

我还想知道映射中的条目总数和匹配数组的长度。我怎么做？

我尝试过map.size和map.values().next().length

当 JWT 令牌过期时，Web 应用程序应显示一个alert或 模式弹出窗口，然后应重定向到登录页面。目前我正在使用烤面包机消息。

我的组件中有很多 api 调用。我收到许多烤面包机消息“令牌已过期”。我应该只显示一条消息并重定向到登录页面。告诉我你的好主意。我在互联网上有一些文章。但我无法清楚地了解这些事情。

import {
    HttpEvent,
    HttpInterceptor,
    HttpHandler,
    HttpRequest,
    HttpResponse,
    HttpErrorResponse
   } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { retry, catchError } from 'rxjs/operators';
import { Router } from '@angular/router';
import { ToastrManager } from 'ng6-toastr-notifications';
import { Injectable } from '@angular/core';
import { JwtDecoderService } from './jwt-decoder.service';

@Injectable()
export class HttpErrorInterceptor implements HttpInterceptor {

    constructor(public router: Router,
                public toastr: ToastrManager,
                private jwtDecoder: JwtDecoderService, ) {
    }

    intercept(request: HttpRequest<any>, …

我正在研究 Angular 6+ 日历。我想添加自定义事件模板，但它不起作用。实际上我想添加一个进度条以及标题和操作按钮，此自定义事件模板不起作用，周视图中没有显示任何事件，也没有错误。我究竟做错了什么？或者还有其他方法在标题中添加 html 吗？我尝试在标题中添加 html（进度条），而 Angular 不允许添加 html。感谢帮助。这是我的代码：

<ng-template #myTemplateId let-event="event" let-placement="placement">
    <div class="cal-tooltip" [ngClass]="'cal-tooltip-' + placement">
      <div class="cal-tooltip-arrow"></div>
      <div class="cal-tooltip-inner" style="min-width: 200px; padding: 10px; text-align: left; font-size:14px; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif">
        <span><b>{{event.classprogram.name + " " + event.name}}</b></span>
        <div style="margin: 10px 0px;">
            <b>Start </b> {{event.startDate | date: 'dd/MM/yyyy'}} {{ " " + event.startTime }}<br/> 
            <b>End </b>{{event.startDate | date: 'dd/MM/yyyy'}} {{ " " + (event.endTime) ? event.endTime : "" }}
        </div>
        <span>{{ event.min_participants …

我需要 Angular 7 的 Stepper 组件的经过检查的解决方案，该解决方案可与 Angular 路由一起使用。

不是Material Design Stepper - 它确实适用于简单的表单，但不适用于路由。

我尝试做的事情<mat-horizontal-stepper>是这样的：

组件.html：

<mat-horizontal-stepper (selectionChange)="selectionChanged($event)" [linear]="true">
    <mat-step *ngFor="let step of steps; let i = index" [label]="step.title">
        <router-outlet *ngIf="i === selectedStepIndex"></router-outlet>
    </mat-step>
</mat-horizontal-stepper>

组件.ts：

public selectedStepIndex: number = 0;

selectionChanged(event: any) {
    this.selectedStepIndex= event.selectedIndex;
    const url = '/some-path/' + this.links[this.selectedStepIndex].path;
    this.router.navigate([url]);//using -> private router: Router
}

但是，由于某种原因我无法返回。Stepper 尝试向后导航，但它显示相同的页面，除非它是 Stepper ( i = 0) 的第一页。

我将非常感谢任何建议（也许还有工作示例），或者有关如何使用<mat-horizontal-stepper>.

我有一个带有多个复选框、下拉菜单和一个保存按钮的组件。这是一个简化的示例组件模板：

<aside class="container">
  <div class="row">
    <input
      type="checkbox"
      id="all-users"
      [(ngModel)]="showAllUsers"
      (ngModelChange)="onChange($event)"
    />
    <label for="all-users">Show all users</label>
  </div>
  <div class="row">
    <ng-select
      [(ngModel)]="selectedUser"
      [clearable]="false"
      appendTo="body"
      (change)="onChange($event)"
    >
      <ng-option *ngFor="let user of activeUsers" [value]="user">{{ user }}</ng-option>
    </ng-select>
  </div>
  <div class="row">
    <button type="button" class="btn btn-primary" [disabled]="!dirty" (click)="onSave()">
      Save Changes
    </button>
  </div>
</aside>

我想Save Changes仅在用户进行更改时启用该按钮，无论是通过取消选中复选框还是更改下拉框中的选择。

现在，我在组件中的每个控件（onChange上例中的函数）上注册了一个事件处理程序，并使用一个dirty标志来禁用或启用Save Changes按钮。

这是上述模板的 component.ts：

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

@Component({
  selector: 'app-filter',
  templateUrl: './filter.component.html',
  styleUrls: ['./filter.component.css']
})
export class FilterComponent implements …