小编Nar*_*arm的帖子

如何在Angular应用程序中处理右键单击事件？

在Angular中有没有办法捕获右键单击事件？我看到(点击)和(dblclick),但是当我尝试(右键单击)时,它不会触发任何事件.有没有办法包含右键单击事件,并让它们由类似于click和dblclick的函数处理,如果它不存在？

angular

Rol*_*ndo

2018 04-03

16
推荐指数

3
解决办法

1万
查看次数

我如何生成一个新的 Angular 项目来支持指定的缩进样式

长期以来，我一直是 angular 开发人员，它总是让我感到困扰，因为运行ng new似乎没有提供一种方法来创建具有指定缩进类型（制表符与空格）或数量（2 与 4）的新项目。

我正在启动一个新的 Angular 7 项目，从阅读github 上的相关讨论来看，这个问题似乎已得到解决。当然，解决方案是复杂且矛盾的，我显然做错了什么，因为我无法运行 lintFix。当我手动运行它时，它似乎没有做任何事情。

有人可以指导我完成生成一个新的 Angular 项目的步骤，该项目在从一个全新的开始后立即尊重指定的缩进样式：npm install -g @angular/cli对于 Angular 7？

lint angular-cli

Mor*_*red

2019 03-13

16
推荐指数

2
解决办法

6501
查看次数

如何通过 Flex-Layout 设置 Angular Material Footer

如何在我的应用程序中设置页脚（我使用 Angular Material），以便它：

如果内容高度小于视口，则粘在底部
如果内容高度超过视口，则向下移动/被向下推

更重要的一件事 - 我想通过angular/flex-layout来实现这一点，而不是通过标准的 HTML/CSS 'flex-box'。

<mat-sidenav-container>
  <mat-sidenav #sidenav
    fixedInViewport="true"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="!(isHandset$ | async)">

    <mat-nav-list>
      <mat-list-item *ngFor="let li of listItems" routerLink="{{li.link}}">
        <mat-icon mat-list-icon>{{li.icon}}</mat-icon>
        <p mat-line>{{li.name}}</p>
      </mat-list-item>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>

    <app-header (menuButtonClick)="sidenav.toggle()"></app-header>

    <ng-content select="[outlet]"></ng-content>

    <app-footer></app-footer>

  </mat-sidenav-content>
</mat-sidenav-container>

Run Code Online (Sandbox Code Playgroud)

谢谢你们。

html css angular-material angular-flex-layout angular

Pax*_*rce

2018 12-21

14
推荐指数

2
解决办法

3万
查看次数

Angular 9 build 为差异加载生成 ES5 包...发生未处理的异常：

昨天我将我的项目升级到了 Angular v9。运行时出现以下错误ng build。

正在为差异加载生成 ES5 包...发生未处理的异常：C:\workspace\project\ui\pages-pages-module-es2015.js：ForInStatement 预期节点的属性左侧为 ["VariableDeclaration"," LVal"] 而是得到了 null 有关更多详细信息，请参阅“C:\Users\sayoo\AppData\Local\Temp\ng-BaceZi\angular-errors.log”。

请在文件下方找到：package.json

{
  "name": "ui",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "start:ar": "ng serve --configuration=ar-IQ",
    "build": "ng build",
    "build:ar": "ng build --configuration=ar-IQ",
    "test": "ng test",
    "test:coverage": "ng test --code-coverage",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "int-extract": "ng xi18n --output-path src/locale",
    "postinstall": "ngcc"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.7",
    "@angular/animations": "^9.0.5",
    "@angular/common": "~9.0.5",
    "@angular/compiler": "~9.0.5",
    "@angular/core": "~9.0.5",
    "@angular/forms": "~9.0.5",
    "@angular/localize": "~9.0.5",
    "@angular/platform-browser": "~9.0.5", …

Run Code Online (Sandbox Code Playgroud)

angular

Say*_*V R

2020 03-10

10
推荐指数

2
解决办法

2万
查看次数

Angular-CLI v6: - no-aot构建选项等效

我最近从与Angular-CLI v1.7.4合作的Angular v5.2.4升级到与Angular-CLI v6.0.8合作的Angular v6.0.3.

由于使用了动态组件,我的项目需要JIT编译器.因此,我的构建脚本用于:ng build --prod --no-aot.

我需要继续使用该--prod标志来保留树摇动,代码缩小和死代码消除的好处.但是,默认情况下--prod启用AOT.该--no-aot选项曾经是禁用AOT的解决方案,但仍然可以获得--prod构建的好处.

我已经尝试了以下选项,因为您可以看到没有构建成功(标准--prod构建除外).我没有从CLI获得任何信息,这对我们没有帮助:

我已阅读官方Angular部署文档以及官方Angular-CLI构建Wiki,但未找到任何有助于解决此问题的信息.

有没有人知道替换--no-aot选项是什么或者是--prod在禁用AOT时进行构建的新方法？

angular-cli angular angular-cli-v6

Nar*_*arm

lucky-day

8
推荐指数

1
解决办法

5265
查看次数

Angular材料:如何正确对齐matInput占位符？

我有这个简单的代码:

<body style="direction: rtl; text-align: right">
    <mat-form-field>        
        <input matInput placeholder="Wanna be rtl" />
    </mat-form-field>
</body>

Run Code Online (Sandbox Code Playgroud)

但无论我想要什么,占位符都保持从左到右.有没有办法让它与右边对齐？

angular-material angular

Aha*_*yon

2018 07-12

8
推荐指数

1
解决办法

5087
查看次数

Angular @Input getter/setter和非原始值

问题:我想每次绑定子组件的对象中的属性发生变化时都能调用一个函数.但是,即使可以看到绑定的输入属性更新,setter也只被调用一次.

这一切都来自于需要将子组件绑定到其父组件属性,该属性恰好是具有深层嵌套属性的复杂对象.我已经了解到,当对象中的嵌套属性发生更改时,Angular onChange事件不会触发.因此决定使用getter/setter.然而,正如这个问题所见,使用getter/setter也无效.我已经改变了我的子组件以订阅父组件订阅的相同Observable,从而直接从服务接收更新并绕过父组件.我已经对Angulars绑定和TypeScript getter/setter进行了大量研究,并且从各方面来看,它看起来像我的代码显示工作,但事实并非如此.

目标:了解为什么使用带有getter/setter的@Input绑定到子组件中的父组件属性不能像非主要类型那样工作.是否存在我缺少的基本概念或我的代码中是否存在实现错误？

我将在这里展示一些源代码,并为任何希望看到它实时运行的人附加StackBlitz. StackBlitz现场演示

模拟data.service.ts

@Injectable()
export class MockDataService {
  public updateSubject: Subject<any> = new Subject();
  public numObj = {
    'prop1': 'stuff',
    'prop2': 'stuff',
    'prop3': 'stuff',
    'prop4': 'stuff',
    'level1': {
      'level2': {
        'target': 0 //target is the prop that will be getting updated
      }
    }
  }
  constructor() {
    this.startDemo();
  }
  private startDemo(): void {
    //This is simulating the server sending updates
    //to the numObj
    setInterval(() => {
      this.numObj.level1.level2.target += 1;
      this.update();
    }, 4000);
  }
  private …

Run Code Online (Sandbox Code Playgroud)

typescript angular-components angular

Nar*_*arm

2018 02-24

6
推荐指数

1
解决办法

2121
查看次数

Server.listeners 不是一个函数

我按照这个 websockets 教程来学习如何将 Socket.IO 集成到 Angular 项目中。我已完全按照这些步骤操作，但是当我尝试运行 websockets 服务器项目时，出现以下错误：

类型错误：server.listeners 不是 Server.attach 中的函数 (\ws-server\node_modules\engine.io\lib\server.js:455:26)

在 server.js 的第 455 行，我们看到了这段代码

  // cache and clean up listeners
  var listeners = server.listeners('request').slice(0);

Run Code Online (Sandbox Code Playgroud)

我很困惑为什么我会看到这个。我已经更新了express和Socket.IO，但仍然遇到同样的问题。如果需要，我可以提供角度代码，但我认为它不相关。

这是我的服务器代码的样子

let app = require('express')();
let http = require('http').Server(app);
let io = require('socket.io')('http');

io.on('connection', (socket) =>{
    //Log when a user connects
    console.log('user connected');

    //Log when a client disconnects
    socket.on('disconnect', function(){
        console.log('user disconnected');
    });

    //When we receive a message event from our client, print out the 
    //contents of that …

Run Code Online (Sandbox Code Playgroud)

javascript websocket npm

onT*_*net

2018 04-07

6
推荐指数

2
解决办法

9931
查看次数

如何在动态组件中使用反应形式

背景

我从包含HTML的服务器接收客户端生成的数据,然后我用它来创建一个动态组件,该组件将被注入并显示在我们的客户端中.我收到的HTML可以包含一个或多个我需要通过Angular Reactive Forms绑定的输入.

尝试1:

我试图通过简单地使用[innerHTML]属性并创建动态Reactive Forms来绑定到输入来解决此要求.但是,由于使用innerHTML属性的技术限制,该方法失败.一旦HTML在浏览器中呈现,所有属性都被强制为小写文本,因此任何Angular指令或属性都会失败.比如*ngIf, *ngFor, [formGroup], formControlName等...... Angular使用camelCase几乎所有东西,因此一旦它被强制为小写文本,它就会被忽略,这种方法不再是一个可行的解决方案.

尝试2:

这次我试图利用Angulars NgTemplateOutlet动态地将HTML添加到组件,然后创建并绑定到Reactive Form.这起初看起来似乎是一个很好的解决方案,但最终为了让html呈现它需要使用[innerHTML]属性,再次使这个方法无用(如我第一次尝试中所述).

尝试3:

最后我发现了动态组件,这个解决方案部分工作.我现在可以成功地创建一个格式良好的Angular HTML模板,该模板在浏览器中正确呈现.然而,这只解决了我的一半要求.此时HTML按预期显示,但我无法创建一个Reactive Form并绑定到输入.

问题

我现在有一个动态组件生成HTML,其中包含我需要通过创建一个Reactive Form来绑定的输入.

尝试4:

我尝试将所有逻辑用于在创建的动态组件中创建Reactive Form.

通过使用此方法,显示动态组件HTML,但是我收到一个新错误:"错误错误:formGroup需要一个FormGroup实例.请传入一个."

StackBlitz有错误的情况

angular angular-reactive-forms angular-dynamic-components

Nar*_*arm

2019 05-29

5
推荐指数

1
解决办法

2988
查看次数

如何在角度组件模板中使用Spread Operator

我想从组件模板将数组传递给函数。
这是我的工具栏：
toolbar.component.html

<div *ngFor="let item of items">
   <button mat-mini-fab [style.color]="item.color" 
    (click)="item.command(...item.commandParams)">
     <i class="material-icons">{{item.icon}}</mat-icon>
   </button>
 </div>

Run Code Online (Sandbox Code Playgroud)

工具栏.component.ts

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

@Component({
  selector: 'app-toolbar',
  templateUrl: './toolbar.component.html',
  styleUrls: ['./toolbar.component.scss']
})
export class ToolbarComponent implements OnInit {
  items: ToolBarItem[]

  constructor() {
  }

  ngOnInit() {
  }
}

export class ToolBarItem {
  icon = 'border_clear';
  color: string;
  command: () => void;
  commandParams: any[];
}

Run Code Online (Sandbox Code Playgroud)

在这里，我想使用各种命令来初始化工具栏的项目。
主要

...
items: [
        {
          icon: 'mode_edit',
          color: 'blue',
          command: (name, family) => {
            console.log('editClick!' + …

Run Code Online (Sandbox Code Playgroud)

angular

M_F*_*and

2018 03-15

5
推荐指数

1
解决办法

3179
查看次数