标签: angular10

最近我在阅读 Nebular（一个 Angular ui 框架）的源码，我对以下代码有疑问：

@Component({
  selector: '[nbMenuItem]',
  templateUrl: './menu-item.component.html',
  animations: [
    ...
  ],
})
export class NbMenuItemComponent implements DoCheck, AfterViewInit, OnDestroy {
  @Input() menuItem = <NbMenuItem>null;

  @Output() hoverItem = new EventEmitter<any>();
  @Output() toggleSubMenu = new EventEmitter<any>();
  @Output() selectItem = new EventEmitter<any>();
  @Output() itemClick = new EventEmitter<any>();

这应该是一个组件，它的使用方法如下：

@Component({
  selector: 'nb-menu',
  styleUrls: ['./menu.component.scss'],
  template: `
    <ul class="menu-items">
      <ng-container *ngFor="let item of items">
        <li nbMenuItem *ngIf="!item.hidden"
            [menuItem]="item"
            [class.menu-group]="item.group"
            (hoverItem)="onHoverItem($event)"
            (toggleSubMenu)="onToggleSubMenu($event)"
            (selectItem)="onSelectItem($event)"
            (itemClick)="onItemClick($event)"
            class="menu-item">
        </li>
      </ng-container>
    </ul>
  `,
})
export class NbMenuComponent …

我正在尝试使用下面的组件设置 IFrame 源输入。

由于某种原因它不起作用，没有显示任何网页。如何正确设置输入源？

调用方法：

<app-viewer-iframe-two
    [url1]="'http://www.food.com'"
    [url2]="'http://www.car.com'"
>
</app-viewer-iframe-two>

打字稿：

export class ViewerIframeTwoComponent implements OnInit {

  constructor() { }

  @Input() url1: string;
  @Input() url2: string;
  
  ngOnInit(): void {
  }
}

HTML：

<div class="box">
  <iframe class="iframe-one" src="{{url1}}" frameborder="0"
    scrolling="yes" align="left"> </iframe>
</div>

<div class="box">
  <iframe class="iframe-two" src="{{url1}}" frameborder="0"
    scrolling="yes" align="right"></iframe>
</div>

错误：

没有设置任何来源，

资源：这仅适用于 Angular 1

如何从 AngularJS 中的变量设置 iframe src 属性

我正在配置 gitlab ci 来运行 Angular 10 测试。
但他们会闲逛（跑的时间超过 10 分钟）。
为什么会发生这种情况？怎么解决呢？

使用的应用程序已由 创建ng new <app-name>。

.gitlab-ci.yml

image: node:14.13.1-alpine3.12

before_script:
  - npm install @angular/cli

build:
  stage: build
  script: npm test --watch=false
  only:
    - master
    - merge_requests

来自 ci 的最新日志

Compiling @angular/router/testing : es2015 as esm2015
09 10 2020 09:32:21.905:WARN [karma]: No captured browser, open http://localhost:9876/
09 10 2020 09:32:21.911:INFO [karma-server]: Karma v5.0.9 server started at http://0.0.0.0:9876/
09 10 2020 09:32:21.912:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
09 10 …

我是角度新手。我面临重定向到外部路由的问题。我想从我的 Angular 应用程序重定向到其他 MVC 应用程序。喜欢：www.abc.com/angularapp到www.abc.com/mvcapp

请帮助如何重定向到此类路线

我们在 Angular 10 中收到此构建警告。如何修复？有没有像 Lodash-es 这样的替代 NPM ？

hotkeys.js 依赖于“捕鼠器”。CommonJs 和 AMD 依赖项可能导致优化救助

错误信息

资源：升级到 Angular 10 - 修复 CommonJS 或 AMD 依赖项可能导致优化救助

我在 mat-toolbar e mat-card 元素中使用 mat-elevation-z4 类，但它根本不起作用。即使我没有在这些元素中应用任何其他 CSS。

版本：
Angular CLI：10.0.6
Node：10.14.2
OS：win32 x64
Angular：10.0.9

该应用程序在 Chrome 桌面上运行，我也在 Firefox 中尝试过。

我用它来尝试修复：但它只能在工具栏中工作并产生其他错误：

.antiBug {
    position: relative;
    z-index: 2;    
}

我的垫卡：

<mat-card class="mat-elevation-z4">
    <mat-card-title class="title">Bem vindo!</mat-card-title>
    <mat-card-subtitle class="subtitle">
        Sistema para exemplificar a construção de um cadastro em Angular
    </mat-card-subtitle>
</mat-card>

我不想盲目安装旧版本的 Angular，希望问题消失。

我怎样才能解决这个问题？

PS：巧合的是，在同一个项目中，我有材质按钮，它们的样式都有效，除了 mat-rise-button，这是“3D”的。看起来 Angular 在控制 z-index 时遇到了一些问题......

查看我的工具栏的 mat.elevation-z8 类

在这里，和我的垫卡一样

我有以下观察结果：

this.authenticationService.isSignedIn() -> Observable<Boolean>

this.user$ -> Observable<UserModel>

我需要根据两者检查条件，所以我尝试了：

zip(this.authenticationService.isSignedIn(), this.user$).pipe(
  map(([isSignedIn, user]: [boolean, UserModel]) => isSignedIn && user.claims))
); 

因为我得到了意想不到的结果，所以我尝试使用以下方法检查内容：

zip(this.authenticationService.isSignedIn(), this.user$).pipe(
  tap(([isSignedIn, user]: [boolean, UserModel]) => {
    console.log(isSignedIn);
    console.log(user);
  })
);

但两人console.log并没有被处决。我缺少什么？

我想在用户在输入中按下逗号（'，'）时捕获该事件。

我已经尝试过这个但没有成功：

<input (keyup.comma)="doSomething()" />

那么如何捕获逗号插入事件呢？

我知道我可以使用(keyup)only 并检查keyCode，但我想知道是否有办法按照我上面描述的方式做到这一点

我有一个动态 formArray，保存数据，一切工作正常，但我在修补值时遇到问题，而且我在网上找不到任何确切的解决方案。

下面是代码，

    <form [formGroup]="educationAndExperienceForm">
        <div formArrayName="educationForm">
            <div *ngFor="let education of educationAndExperienceForm.controls.educationForm['controls'];let i = index;"
                [formGroupName]="i">
                <h6 class="text-left circularBold" *ngIf="i == 0"><b>Highest Qualification</b></h6>
                <input type="text" class="education-inputs w-100 mt-3" placeholder="School/College/University"
                    formControlName="school"
                    [ngClass]="{ 'input-error': submitted && educationAndExperienceForm.controls.educationForm.controls[i].invalid }">
                <input type="text" class="education-inputs w-100 mt-3" placeholder="Degree Ex: Master's"
                    formControlName="degree"
                    [ngClass]="{ 'input-error': submitted && educationAndExperienceForm.controls.educationForm.controls[i].invalid }">
                <input type="text" class="education-inputs w-100 mt-3"
                    placeholder="Field of Education Ex: Computer Science" formControlName="specialization"
                    [ngClass]="{ 'input-error': submitted && educationAndExperienceForm.controls.educationForm.controls[i].invalid }">
                <div class="text-left">
                    <input type="text" class="education-inputs w-100 mt-3" placeholder="Graduate Year"
                        formControlName="passed_year"
                        [ngClass]="{ …

我有一个布局页面，其中包含 mat-sidenav-container 和 router-outlet。我尝试调用该函数并将数据从 router-outlet Page By EventEmitter 传递到 LayoutPage 但它不起作用。我在这里发现了与我类似的问题： @Output with EventEmitter from child toparent, view does not update in Parent

如果将 router-outlet 标签替换为组件选择器标签（app-child）就可以了，但是 router-outlet 标签对我来说是必需的。我需要通过 router-outlet 标签导航网页。那我该怎么办？

布局.组件.html

<mat-sidenav-container>
    <mat-sidenav #sideNav opened="true" mode="side" class="sidebar" style="background-image: url('assets/images/test.png');">
      <ul class="nav">
        <li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="test nav-item">
            <a class="nav-link" [routerLink]="[menuItem.path]" [queryParams]="filter">
                <i class="material-icons">{{menuItem.icon}}</i>
                <p>{{menuItem.title}}</p>
            </a>
        </li>
    </ul>
    </mat-sidenav>
  
    <mat-sidenav-content class="content">
        <app-header></app-header>
      <router-outlet (onDatePicked)='doSomething($event)' > </router-outlet>
      
    </mat-sidenav-content>
  </mat-sidenav-container>

布局.组件.ts

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